5 nowości w CSS3, które pokochasz

W CSS dostaniemy wiele ciekawych opcji. Wybraliśmy z nich 5, które dają najlepsze efekty przy najmniejszym nakładzie pracy. Oczywiście jeśli są stosowane z umiarem.

Zaokrąglone rogi

"Podoba mi się, ale zróbcie zaokrąglone rogi". Słyszałeś to przedstawiając gotową stronę klientowi? Od teraz okrągłe rogi nie wymagają używania żadnej grafiki, obliczania ile pikseli zajmuje ramka czy otaczania elementu nadmiarowymi tagami. O tabelkach nie trzeba nawet wspominać.

W arkuszu ustalamy tylko własność "border-radius: promień" (dodatkowo z przedrostkami -moz- i -webkit-) i cieszymy się okrągłymi rogami. Proste? I tak ma być.

Osoby odpowiedzialne za wygląd CSS3 zauważyły w końcu, że proste rzeczy mają być proste w implementacji. Niestety nie wiadomo jeszcze które atrybuty ostatecznie znajdą się w standardzie, więc musimy poprzedzać je przedrostkami adekwatnymi do przeglądarki.

Cienie

Dzięki box-shadow możesz łatwo dodać do elementów blokowych efekt cienia. Zostanie on wyrenderowany przez przeglądarkę i nie wymaga żadnej grafiki. Co najlepsze, elementy znajdujące się pod cieniem zostaną równomiernie przyciemnione, a nie zastąpione czarną plamą. Jeśli potrafisz zrobić to estetycznie, możesz skorzystać również z cieniowania tekstu (text-shadow), które było dostępne już wcześniej, ale nie zdobyło popularności.

Układ wielokolumnowy

Jeśli uważasz, że na panoramicznych monitorach twoich czytelników marnuje się zbyt dużo miejsca, a linijka o szeroka na pół metra jest nieco za długa, podziel tekst na kolumny. Lepiej wykorzystasz przestrzeń, a strona będzie przypominała gazetę. Wystarczy tylko podać ile kolumn ma mieć akapit (column-count:X) i jakie mają być między nimi odstępy (column-gap: Y), a przeglądarka zajmie się resztą.

Pamiętaj tylko, żeby kolumny nie były za wysokie – czytelnicy musieliby ciągle przewijać stronę w górę i w dół.

Wszystkie fonty są standardowe

Chcesz użyć własnego fontu bez ryzyka, że 99,9% odwiedzających i tak zobaczy Timesa? Żaden problem, nie musisz nawet zapisywać tekstu jako grafiki. Stosując @font-face możesz dołączyć własny font, a później używać go w dalszej części dokumentu tak jak każdego innego kroju. Nie zapomnij tylko wgrać pliku z fontem na serwer!

Co drugi od trzeciego...

Na koniec coś trochę trudniejszego, ale równie efektywnego. Aby zaznaczyć np. co drugi wiersz tabeli nie musisz już oznaczać ich niepotrzebnymi klasami. Teraz wystarczy skorzystać z pseudoklasy :nth-child. Pseudoklasy występujące do tej pory to np. pierwsza litera albo aktywny element. Oznaczane są po dwukropku np. a:hover oznacza wskazany odnośnik. Analogicznie body:nth-child(2n+3) będzie oznaczało co drugie (2n) dziecko (nth-child) poczynając od trzeciego (+3). Do odznaczania komentarzy albo wierszy w tabelach nada się idealnie.

Nie przejmując się tym, że blisko połowa internautów nie posiada przeglądarki, która jest w stanie wyświetlić efekty CSS-a 3, pozostali i tak nie zwrócą na nie uwagi, możesz zabrać się za ich wdrażanie. Tylko nie przesadzaj, żeby nie otrzymać takiego kiczu jak załączony przykład.

Zobacz przykład z artykułu: