Z wydania na wydanie najnowsze przeglądarki odsłaniają kolejne karty i umożliwiają coraz większą obsługę CSS w wersji 3. Jestem bardzo zadowolony z tego faktu, ponieważ oznacza to przede wszystkim mniej pracy dla ludzi odpowiedzialnych za wygląd stron, o wiele mniejszy czas ładowania strony (mniej obrazków, oraz mniej skryptów), większe możliwości w konfiguracji oraz większą elastyczność w modyfikowaniu wyglądu strony. Niestety w dalszym ciągu w tyle pozostają produkty Microsoftu, ale na szczęście istnieją rozwiązania, które implementują taką funkcjonalność w tych zardzewiałych silnikach

Zaokrąglone rogi

Jest to jedna z głównych przyczyn, dla której webmasterzy decydują się używać obrazków tła wszelkich przycisków i elementów na stronie. Na szczęście możemy użyć:

1
2
3

 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 border-radius:3px;

Niestety w dalszym ciągu Microsoft nie postanowiło wspierać zaokrąglonych rogów w swoich przeglądarkach. Podobny efekt możemy uzyskać w IE poprzez dodanie atrybutu behavior:url(rounded.htc) ale jest to sposób, który dość mocno ingeruje w strukturę drzewa DOM i nie daje pożądanych efektów.

Cień pod tekstem

Efekt ten możemy uzyskać poprzez dodanie następującej wartości:

1

text-shadow:0 1px 1px #FFF;

Jest to bardzo fajny sposób na uzyskanie prowizorycznej wypukłości lub wgniecenia tekstu. Metoda ta sprawuje się bardzo dobrze pod przeglądarkami uruchomianymi na komputerach desktop-owych. Jednak, kiedy oglądałem stronkę pod Operą Mini, tekst był starasznie nieczytelny i rozmazany.

Cień pod elementem blokowym

Cień dla elementów blokowych możemy uzyskać poprzez dodanie takiego oto kodu CSS3 do naszej strony.

1
2
3
4

-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0 2px 2px rgba(0, 0, 0, 0.2);
filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=160, Color='#DDDDDD');

Osadzanie czcionek

Czcionki, które są dostępne we wszystkich przeglądarkach, powoli zaczęły nudzić czytelników. Obojętnie, na którą stronę byśmy nie weszli, zawsze było wiadomo, że zobaczymy na niej jedną z następujących czcionek: Arial, Verdana, Helvetica, Tahoma, Georgia, Times albo ekstrawagancki Comic Sans. W CSS3 Będziemy mogli po prostu wrzucić używaną przez nas czcionkę na serwer, a następnie odwołać się do niej za pośrednictwem wartości @font-face.

Gradienty

Gradienty stały się nieodłącznym elementem stron WWW. Widzimy je praktycznie na każdej stronie internetowej. Wiadomo, że do czasu kiedy nie było CSS3 twórcy stron musieli używać obrazków w miejsce gradientów. Musieli, ponieważ od teraz mogą użyć następujących wartości CSS, aby usyskać taki sam efekt:

1
2
3

background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

Podsumowanie

Oczywiście wszystkie wymienione tutaj własności CSS3 to tylko mały zalążek tego, co będzie będzie dostępne w jego pełnej specyfikacji. CSS3 zostanie w pełni wprowadzony w życie wraz z pojawieniem się standardu HTML5 i będzie oferował dużo dużo więcej, niż tylko to, co zostało wspomniane w tym poście. Niestety prace nad nowym CSS są w dalszym ciągu we wstępnej fazie rozwoju i jeszcze minie spory okres czasu, kiedy w 100% wejdą w w życie. Na szczęście producenci dobrych przeglądarek pomyśleli, żeby wprowadzać do ich produktów obsługę CSS3 i ułatwić tym sposobem życie wszystkim Webmasterom. Jeśli chcielibyście dowiedzieć się więcej o standardzie CSS3, zachęcam Was do zapoznania się z tym dokumentem.