Zaawansowane techniki w CSS

CSS wciąż się rozwija, wprowadzając nowe możliwości, które pozwalają tworzyć bardziej elastyczne, wydajne i efektowne style bez konieczności używania JavaScript czy dodatkowych grafik. Do najważniejszych należą zmienne CSS, kalkulacje, filtry, tryby mieszania oraz najnowsze container queries.

1. CSS Variables (custom properties) i kalkulacje (calc())

CSS Variables – czym są?

• Zmienne CSS (tzw. custom properties) to wartości przechowywane w specjalnych identyfikatorach.
• Definiuje się je za pomocą --nazwa i używa z pomocą funkcji var().
• Można je definiować lokalnie (dla danego elementu) lub globalnie (najczęściej w :root).

Przykład:

Zmienne sprawiają, że łatwo zmienia się kolory, odstępy czy inne wartości w całym projekcie.

Funkcja calc()

Pozwala wykonywać obliczenia matematyczne w CSS. Można łączyć różne jednostki (px, %, em, vh, itp.).

Przykład:

Dzięki calc() można dynamicznie obliczać wartości, bez potrzeby skomplikowanych media queries czy JS.

2. Filtry (filter) i efekty graficzne

Właściwość filter pozwala nakładać na elementy efekty graficzne, podobne do tych w programach graficznych. Może być stosowana do obrazów, tekstu, a nawet całych bloków HTML.

Najpopularniejsze filtry:

• blur(px) – rozmycie
• brightness(%) – jasność
• contrast(%) – kontrast
• grayscale(%) – skala szarości
• sepia(%) – sepiowy efekt
• hue-rotate(deg) – zmiana barwy
• invert(%) – odwrócenie kolorów
• opacity(%) – przezroczystość
• drop-shadow(x y blur color) – cień jak w Photoshopie

Przykład:

Filtry są wydajne, wspierane przez większość przeglądarek i często zastępują dodatkową obróbkę grafiki.

3. Tryby mieszania (mix-blend-mode)

mix-blend-mode określa, jak element ma się mieszać z tłem (podobnie jak tryby mieszania warstw w Photoshopie).

Najpopularniejsze tryby:

• multiply – ciemniejsze kolory (iloczyn)
• screen – jaśniejsze kolory (ekran)
• overlay – połączenie multiply i screen
• darken – ciemniejszy z dwóch kolorów
• lighten – jaśniejszy z dwóch kolorów
• difference – różnica między kolorami
• exclusion, hue, color, luminosity – bardziej artystyczne efekty

Przykład:

Efekt często wykorzystywany w grafikach, nagłówkach i banerach, by tekst lub obraz wtopił się w tło.

4. Container Queries (nowość w CSS)

Do niedawna media queries działały tylko w oparciu o rozmiar całego okna przeglądarki. Container queries (zapytania kontenerowe) pozwalają stosować różne style w zależności od rozmiaru konkretnego kontenera, a nie całego viewportu.

Dlaczego to ważne?

• Umożliwia tworzenie bardziej modułowych i niezależnych komponentów.
• Elementy dostosowują się do miejsca, w którym zostały osadzone.

Składnia container queries:

• Najpierw oznaczamy kontener:

• Następnie definiujemy zapytanie dla tego kontenera:

W tym przykładzie układ kart zmienia się, gdy kontener osiągnie szerokość 400px, niezależnie od szerokości całego okna.

Praktyczny przykład:

Dzięki temu ta sama karta zachowuje się inaczej w wąskiej i szerokiej kolumnie, bez dodatkowych media queries.