Powoli mijają czasy, w których tło na stronach czy przyciski tworzone są w oparciu o pliki graficzne. Efekty gradientu czy zaokrąglone rogi, których wykonanie możliwe było jedynie za pomocą programów graficznych teraz możemy osiągnąć dzięki CSS3.

O ile ostatnie wersje przeglądarek Firefox czy Safari nie będą mieć problemu z wyświetleniem takiej zawartości, o tyle gorzej uzyskać podobny efekt w IE, ale może i tutaj będą z czasem jakieś postępy – IE w wersji 9 ma już obsługiwać funkcjonalności CSS3. Dla zainteresowanych demo IE9 można pobrać tutaj.

W dalszej części artykułu porównamy składnię rysowania gradientu dla poszczególnych przeglądarek oraz stworzymy przykładowy przycisk na stronę

GRADIENT 2-kolorowy

Mozilla

background: -moz-linear-gradient(top, green, yellow);

gdzie:

-moz-linear-gradient – typ gradientu: liniowy
top – początek kreślenia gradientu (można też w stopniach np. -45deg)
green – kolor początkowy
yellow – kolor końcowy

WebKit

background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(yellow));

gdzie:

linear – liniowy typ gradientu
0 0 – współrzędne X oraz Y określające początek kreślenia gradientu (lub left-top corner)
0 100% – współrzędne X oraz Y określające koniec kreślenia gradientu (lub left-bottom corner)
from(green) – kolor początkowy
to(yellow) – kolor końcowy

Internet Explorer

W IE gradient możemy uzyskać za pomocą filtru:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=green, endColorstr=yellow);

gdzie:

GradientType – przyjmuje wartości: 0 (od góry do dołu) oraz 1 (z lewej do prawej)
startColorstr – kolor początkowy
endColorstr – kolor końcowy

A tak powinien wyglądać nasz przykładowy gradient (jeżeli go nie widzisz oznacza to, że Twoja przeglądarka nie obsługuje atrybutu gradient):

Różne formy gradientu

Poniższe wpisy dotyczą przeglądarek Mozilla oraz Safari. W bardzo prosty sposób możemy sterować rozpiętością kolorów oraz ich liczbą. W pierwszym przykładzie zmienimy rozpiętość koloru zielonego w ten sposób aby zajmował ok. 20% obiektu:

background: -moz-linear-gradient(top, green, yellow 20%);
background: -webkit-gradient(linear, 0 0, 0 20%, from(green), to(yellow));

W następnym przykładzie wpasujemy dodatkowy kolor w kolejności: zielony, żółty od 20%, niebieski od 30%.

background: -moz-linear-gradient(top, green, yellow 20%, blue 30%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(green), color-stop(20%, yellow), color-stop(30%, blue));

Powyższy schemat kolorów jest wyłącznie poglądowy – nie polecam stosować takiej kolorystyki na stronie

Przycisk podstawowy

Stworzymy najprostszy przycisk, który powinna obsługiwać każda przeglądarka: ramka o grubości 1px, tekst wycentrowany i odsunięty od brzegów ramki zgodnie z poniższym kodem:

border:1px solid #999;
color:#666;
background:#eee;
display:block;
text-align:center;
text-decoration:none;
padding:15px 15px;
width:15em;
text-transform:uppercase;
font-weight:bold;
font-size:1.5em;

Strona główna

Przycisk CSS3

Dodamy teraz zaokrąglone rogi, cień pod przyciskiem oraz wypełnienie gradientowe z zachowaniem składni wcześniej już omawianej:

-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
border-radius:0.5em;
-moz-box-shadow: 1px 1px 6px #666;
-webkit-box-shadow: 1px 1px 6px #666;
box-shadow:1px 1px 6px #666;
background:-moz-linear-gradient(center top , #eee, #ccc 50%, #aaa 51%, #ccc 100%); background:-webkit-gradient(linear, left top, left bottom,from(#eee), to(#ccc), color-stop(0.5, #ccc), color-stop(0.51, #aaa));
filter:progid:DXImageTransform.Microsoft.Shadow(color=#555555,direction=45);

Strona główna
Do kompletu dołożymy jeszcze efekt hover zgodnie z poniższym kodem:

text-decoration:none;
border: 1px solid #0e930e;
color:#fff;
background:-moz-linear-gradient(center top , #98eb98, #33cc33 50%, #1da81d 51%, #33cc33 100%);
background:-webkit-gradient(linear, left top, left bottom, from(#98eb98), to(#33cc33), color-stop(0.5, #33cc33), color-stop(0.51, #1da81d));

I w efekcie otrzymujemy funkcjonalny button na naszą stronę.

Strona główna

Reasumując – korzystajmy z funkcjonalności CSS3 w sposób przemyślany pamiętając o ustawianiu wartości domyślnych tła i przycisków dla przeglądarek nie potrafiących wyświetlić naszej treści w taki sposób jak sobie tego życzymy.