Implementacja serwisów internetowych

CSS Figury geometryczne za pomocą kodu

CSS3 figury geometryczne

Wykorzystanie kodu programistycznego, zamiast znacznie wolniej ładujących się obrazków, jest w wielu przypadkach znaczną optymalizacją. Należy jednak pamiętać, że pomimo znacznie wyższego czasu ładowania, zasoby zewnętrzne (takie, jak obrazki, animacje) ładują się, wyglądają i działają dokładnie w taki sam sposób, niezależnie od rodzaju używanego urządzenia, systemu, czy przeglądarki internetowej. W przypadku tworzenia figur geometrycznych za pomocą kodu CSS, należy brać pod uwagę rodzaj docelowego urządzenia i obsługiwane przez niego przeglądarki.

Standardy stron internetowych zmieniają się. Języki programowania ewoluują. Dokładnie dwie takie same funkcje są implementowane w różnych przeglądarkach w odmienny sposób. Metody interpretacji funkcji (zwłaszcza na starszych urządzeniach) są różne. Podczas rysowania figur geometrycznych za pomocą kodu CSS, należy skorzystać z dokumentacji i sprawdzić ograniczenia oraz możliwości wszystkich użytych właściwości i ich wartości.

W Internecie dostępnych jest wiele serwisów, w których można wprowadzić nazwę używanej funkcji i uzyskać informację o jej kompatybilności z różnymi przeglądarkami internetowymi. Jednym z ciekawszych przykładów serwisów określających zgodność funkcji CSS z przeglądarkami internetowymi jest witryna: Can I use. Za pomocą przedstawionego serwisu, użytkownik może wprowadzić nazwę dowolnej właściwości CSS i uzyskać pełną listę kompatybilnych z nią przeglądarek i ich wersji. Strona udostępnia również bezpośredni link do dokumentacji, określającej poprawny sposób korzystania z wyszukiwanej właściwości.

CSS Figury geometryczne
Zrzut ekranowy serwisu „Can I use” umożliwiającego sprawdzenie kompatybilności wybranej funkcji z różnymi przeglądarkami i ich wersjami.

Bieżący artykuł „CSS Figury geometryczne” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: .

Przykład 14: trapez

Aby narysować trapez, należy wykorzystać wiedzę dotyczącą rysowania trójkątów. Trapez to nic innego jak „ścięty” trójkąt. Wystarczy więc narysować trójkąt, a następnie określić mu dodatnią wartość właściwości width.

Przykład 15: trapez prostokątny

Trapez prostokątny jest przykładem trapezu, którego jeden bok posiada kąt prosty. Do jego narysowania, należy użyć trójkąta prostokątnego w podobny sposób jak w przykładzie czternastym.

Przykład 16: trapez równoramienny

Implementacja trapezu równoramiennego jest modyfikacją kodu odpowiedzialnego za rysowanie trójkąta równoramiennego. Bazując na przykładach czternastym lub piętnastym, aby narysować trapez równoramienny, należy ustawić takie same wartości właściwości border-left oraz border-right.

Przykład 17: odwrócony trapez

Wykorzystanie właściwości border-bottom określa, że dłuższą podstawą trapezu będzie jego dolna podstawa. Jeśli użytkownik chciałby, aby trapez posiadał dłuższą górną podstawę, to powinien skorzystać z właściwości border-top.

Przykład 18: trapez pionowy (obrócony w lewo)

Ostatnim przedstawionym trapezem będzie trapez pionowy. Trapez pionowy wykorzystuje podobne właściwości, co klasyczny trapez poziomy. Aby narysować trapez pionowy, należy zamienić ze sobą następujące wartości właściwości trapezu poziomego:

  • widthheight,
  • border-leftborder-top,
  • border-rightborder-bottom,
  • border-topborder-right.

Przykład 19: trapez pionowy (obrócony w prawo)

Aby lewy bok trapezu był dłuższy od prawego, należy wykorzystać właściwość border-left zamiast właściwości border-right.

Przykład 20: równoległobok (pochylony na lewo)

W celu narysowania równoległoboku, należy narysować prostokąt, a następnie pochylić go za pomocą funkcji transform: skewX( angle ) o określony kąt.

Przykład 21: równoległobok (pochylony na prawo)

Manewrując wartością kąta transformacji można dowolnie pochylać równoległobok. Wartości ujemne kąta pochylają figurę w przeciwną stronę.

Przykład 22: równoległobok pionowo (pochylony do góry)

Aby narysować równoległobok pionowo, należy zamiast funkcji skewX( angle ) skorzystać z funkcji skewY( angle ).

Przykład 23: równoległobok pionowo (pochylony do dołu)

Podobnie, jak w przypadku obracania równoległoboku w prawą stronę, aby narysować równoległobok pionowy pochylony w dół, należy zmienić kąt pochylenia na wartość ujemną.

Przykład 24: romb (pochylony na lewo)

Romb to równoległobok dla którego wszystkie boki są jednakowej długości. Aby narysować romb, należy skorzystać z twierdzenia sinusów i wyliczyć nową wysokość figury. Wysokość będzie równa iloczynowi sinusa kąta ostrego rombu i długości jego boku (h = sin(α) * a).

Przykład 25: romb (pochylony na prawo)

Manewrując wartością kąta pochylenia rombu (identycznie, jak w przypadku równoległoboku), można pochylić figurę w przeciwną stronę.

Przykład 26: romb pionowo (pochylony do góry)

Korzystając z funkcji skewY( angle ) (identycznie, jak w przypadku równoległoboku pionowego) można obrócić romb pionowo.

Przykład 27: romb pionowo (pochylony do dołu)

Ponownie manewrując wartością kąta pochylenia rombu (identycznie, jak w przypadku równoległoboku pionowego), można pochylić figurę w przeciwną stronę.

Ciąg dalszy w artykule: .

← Poprzedni artykuł

Następny artykuł →

Komentarze: 4

  1. Axe

    Axe

    1 czerwca 2014 o 10:56

    Z równoległoboków korzystałem, tworząc z nich pozycję w MENU. Dzięki CSS łatwo i szybko zmieniałem hover na wskazanym elemencie.

    Z niczego innego z przedstawionych przykładów nie korzystałem.

    Odpowiedz
    • Ania

      Ania

      23 czerwca 2014 o 13:23

      Ja z trapezów do tego samego celu

  2. Student

    Student

    6 maja 2015 o 22:03

    Can I use to świetny serwis, sam z niego korzystam na co dzień w swoich projektach. Brakuje mi w nim lepszej wyszukiwarki, czasami głupoty zwraca. Poza tym miesza różne języki programowania, nie jest tylko do CSSa ale również działa na HTMLu.

    Odpowiedz
  3. Robi

    Robi

    7 czerwca 2016 o 20:12

    Dzięki za przykład z równoległobokiem – przydał się.

    Odpowiedz

Komentuj

Twój adres email nie zostanie opublikowany. Służyć będzie tylko i wyłącznie w celu udzielenia odpowiedzi na zadane pytanie lub komentarz. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *.