Współczesne strony internetowe nie ograniczają się już tylko do prostokątnych przycisków i bloków tekstu. Dzięki CSS (ang. Cascading Style Sheets) możemy tworzyć kształty i figury geometryczne, które wzbogacają wizualnie interfejs użytkownika bez potrzeby używania ciężkich grafik czy obrazów SVG, których ładowanie dodatkowo spowalnia stronę internetową.
Dlaczego warto używać kształtów CSS?
Tworzenie figur w CSS niesie za sobą wiele korzyści:
- Mniejsza liczba dodatkowych zasobów (obrazów, grafik, bibliotek JavaScript) – mniejsze zużycie danych i szybsze ładowanie strony.
- Responsywność – figury można łatwo skalować i dopasowywać do różnych ekranów.
- Łatwiejsze utrzymanie kodu – modyfikacje są szybkie i nie wymagają edycji plików graficznych.
- Lepsza dostępność i SEO – mniej elementów zewnętrznych wpływa pozytywnie na strukturę strony.
- Uniwersalność – kod można dowolnie modyfikować, zmieniając kolor figury, wielkość, a nawet sposób animacji.
- Powtarzalność – raz załadowany kod do pamięci cache można wielokrotnie używać na różnych podstronach, bez potrzeby jego ponownego pobierania.
Zastosowania figur CSS w projektach webowych
CSS to prosta i bardzo wydajna metoda do rysowania elementów na stronie www, bez potrzeby ładowania dodatkowych zasobów obciążających stronę internetową i wpływających na jej pozycjonowanie. Kształty i figury w CSS najczęściej wykorzystywane są jako:
- dekoracyjne elementy tła,
- wskaźniki i ikony,
- elementy interfejsu użytkownika (przyciski, ramki),
- animacje i przejścia – kształty mogą być animowane za pomocą
@keyframes.
SEO i dostępność – czy figury CSS wpływają na pozycjonowanie?
Odpowiednio przygotowany, lekki kod CSS nie wpływa negatywnie na pozycjonowanie. Wykorzystanie CSS:
- poprawia wydajność strony (szybsze ładowanie = wyższe oceny w Core Web Vitals),
- ogranicza użycie ciężkich obrazków,
- pozwala tworzyć bardziej przystępne projekty dla urządzeń o różnych wielkościach ekranu (ang. Responsive Web Design).
To wszystko pośrednio wspiera SEO i pozytywne doświadczenie użytkownika (UX), które Google coraz bardziej premiuje.
Przykłady kształtów i figur w CSS
Przykład 1: prostokąt
Najprostszym i najczęściej wykorzystywanym kształtem na stronach internetowych są prostokąty. Z prostokątów składają się wszystkie elementy na stronie internetowej: bloki, tabele, rysunki, formularze. Manipulując wysokością i szerokością obiektu, można stworzyć dowolny prostokąt.
Przykład 2: kwadrat
Kwadrat jest prostokątem, który posiada wszystkie boki równej długości. Należy więc zmienić kod z przykładu pierwszego, aby wysokość i szerokość tworzonego obiektu były sobie równe.
Przykład 3: koło
Koło jest kwadratem, który posiada zaokrąglone wszystkie boki. Do napisanego w przykładzie drugim kwadratu należy dodać zaokrąglenie za pomocą właściwości border-radius.
Przykład 4: owal
Owal to zaokrąglony prostokąt. Jeśli figura ma dłuższą podstawę, to owal będzie poziomy. Jeśli kształt ma dłuższy bok od podstawy, to owal będzie pionowy.
Przykład 5: trójkąt równoramienny
Aby narysować trójkąt równoramienny, należy odpowiednio sterować obramowaniem border obiektu. W przedstawionym przykładzie border-left odpowiada za lewą połowę długości podstawy obiektu, a border-right za jego prawą połowę. Własność border-bottom określa wysokość trójkąta. Wysokość i szerokość obiektu pozostają wyzerowane. Trójkąt rysowany jest wyłącznie z obramowań.
Od autora
Na początku sposób rysowania trójkątów w CSS może wydawać się skomplikowany i niejasny, ale zapewniam, że po przestudiowaniu i praktycznym zastosowaniu przykładów 5–13 zasada działania okaże się dużo prostsza i bardziej zrozumiała. Praktyka czyni mistrza.
Przykład 6: trójkąt równoboczny
Trójkąt równoboczny jest rodzajem trójkąta równoramiennego, dla którego wszystkie boki są równej długości. Aby narysować trójkąt równoboczny, należy najpierw określić długość jego ramion, a następnie obliczyć jego wysokość. Wysokość trójkąta równobocznego jest równa: (a√3)÷2, gdzie a to długość boku. Jeśli wiec bok trójkąta ma 140px, to jego wysokość jest równa w przybliżeniu 121px.
Posiadając wszystkie niezbędne wartości parametrów trójkąta, można bez przeszkód zmodyfikować przykład piąty i uzyskać rysunek trójkąta równobocznego.
Przykład 7: trójkąt równoboczny „do góry nogami”
Aby odwrócić trójkąt równoboczny, należy w przykładzie szóstym zastąpić właściwość border-bottom, właściwością border-top.
Na podobnej zasadzie można przekształcić trójkąt równoramienny z przykładu piątego.
Przykład 8: trójkąt równoboczny skierowany w lewą stronę (przycisk wstecz)
Aby uzyskać trójkąt skierowany w lewą stronę, należy wykorzystać inne obramowanie obiektu. Tym razem podstawę trójkąta będą budować border-top i border-bottom, a za jego wysokość będzie odpowiadać border-right.
Od autora
Trójkąt skierowany w prawą i lewą stronę mogą służyć jako przyciski poprzedni (wstecz) i następny (dalej). Przyciski tego rodzaju można w pełni modyfikować. Na przykład zmienić kolor po akcji :hover, powiększyć lub dodać animację. Dowolna zmiana może uczynić projektowaną stronę ciekawszą od strony konkurencji.
Zwyczajny obrazek nie pozwala na tego rodzaju modyfikacje.
Przykład 9: trójkąt równoboczny skierowany w prawą stronę (przycisk dalej)
Sytuacja podobna jak w przykładzie ósmym z tą różnicą, że przycisk odwrócony jest w prawą stronę (używamy border-left zamiast border-right).
Przykład 10: trójkąt prostokątny (wersja A)
Odpowiednio modyfikując obramowanie border obiektu, można stworzyć dowolny trójkąt.
Przykład 11: trójkąt prostokątny (wersja B)
Przykład 12: trójkąt prostokątny (wersja C)
Przykład 13: trójkąt prostokątny (wersja D)
Aktualizacja
Przykład dodatkowy 1: Okrąg
Okrąg to koło, które zamiast tła posiada obramowanie. Aby narysować okrąg, należy skorzystać z przykładu trzeciego, w którym zamiast właściwości background-color, należy użyć właściwość border.
Ciąg dalszy w artykule: CSS figury geometryczne rysowane za pomocą kodu.
