W poprzednim poście pokazałam w jaki sposób można stworzyć tło gradientowe poprawnie wyświetlane w przeglądarkach Mozilli, Chrome czy IE. Odkąd Opera poczyniła zdecydowane kroki w kierunku wsparcia CSS3 można już tworzyć ciekawe efekty również dla tej przeglądarki.

Wygląda na to, że przynajmniej na tym etapie będzie można wyeliminować udział programów graficznych do produkcji niejednolitego tła. Teraz jeśli mam ochotę zmienić sobie schemat kolorów wystarczy, że wklepię formułkę w pliku *.css i problem z głowy.

Obecnie opera potrafi wyświetlić różne gradienty liniowe: 2 i kilku kolorowe (na wsparcie gradientów radialnych musimy jeszcze chwilę poczekać).

Gradient 2-kolorowy

Aby utworzyć podstawowy gradient liniowy (-o-linear-gradient), należy naturalnie podać kolory początkowy i końcowy (podobnie jak to było w przypadku np. Mozilli):

width:300px;
border-radius:0.5em;
color:#fff;
font-size:16px;
text-shadow: 1px 1px 1px black;
text-align:center;
padding:20px 0 20px 0;

background-image: -o-linear-gradient(rgb(0,183,229),rgb(20,86,102));

Klasyczny prosty gradient kreślony w linii prostej od góry do dołu. Masz też możliwość sterowania kierunkiem kreślenia gradientu z pomocą definicji deg. I tak:

0deg – kreśli od lewej do prawej

background-image: -o-linear-gradient(0deg,rgb(0,183,229),rgb(20,86,102));

90deg – kreśli od dołu do góry

background-image: -o-linear-gradient(90deg,rgb(0,183,229),rgb(20,86,102));

180deg – kreśli od prawej do lewej

background-image: -o-linear-gradient(180deg,rgb(0,183,229),rgb(20,86,102));

270deg – kreśli od góry do dołu

background-image: -o-linear-gradient(270deg,rgb(0,183,229),rgb(20,86,102));

360deg działa analogicznie jak 0deg. Możesz ustawić sobie dowolny kąt kreślenia gradientu. Ten sam efekt uzyskasz również za pomocą definicji top left, top right, bottom left, bottom right. No dobrze, tak jest w przypadku gradientów 2-kolorowych, a jak jest w przypadku kilku kolorów?

Gradient wielokolorowy

Rozważmy gradient z pierwszego przykładu:

background-image: -o-linear-gradient(rgb(0,183,229),rgb(20,86,102));

możemy zapisać analogicznie w postaci:

background-image: -o-linear-gradient(top,rgb(0,183,229) 0%,rgb(20,86,102) 100%);

Teraz „złamiemy” go w połowie kolorem fioletowym

background-image: -o-linear-gradient(top,rgb(0,183,229),rgb(93,16,137) 50%,rgb(52,6,78) 75%,rgb(20,86,102));

Dołożyliśmy nowy kolor na wysokości 50% oraz kolejny na wysokości 75% licząc od góry. Zamiast procentów można naturalnie wykorzystywać piksele jeśli wartość pola wyznaczona jest w pikselach, np.

background-image: -o-linear-gradient(top,rgb(0,183,229),rgb(93,16,137) 27px,rgb(52,6,78) 40px,rgb(20,86,102));

Uzyskamy efekt podobny do wcześniejszego przykładu.

Powtarzanie gradientu

Jeśli mamy taką potrzebę możemy dany schemat kolorów powtarzać wielokrotnie. Być może efekt końcowy nie jest zbyt elegancki, ale warto wiedzieć że taka możliwość istnieje. Za powtarzanie gradientu odpowiedzialna jest pdefinicja repeating-linear-gradient. Nie jest wskazane używanie wartości procentowych gdyż może to zaburzyć jednorodność tła. Lepiej opierać się na wartościach pikseli.

background-image: -o-repeating-linear-gradient(45deg,rgb(0,183,229),rgb(103,215,244) 30px, rgb(20,86,102) 50px);

Przezroczystość gradientu

Za pomocą przezroczystości gradientu możemy uzyskać kolejny ciekawy efekt tła naszego przycisku. Pojawia się nam nowa definicja rgba z możliwością podania wartości kanału alfa, który pozwoli na uzyskanie efektu przezroczystości tła przycisku. Zapis z pierwszego przykładu zmodyfikujemy w sposób następujący:

background-image: -o-linear-gradient(top,rgba(0,183,229,1),rgba(20,86,102,0.2));

Naturalnie na białym tle nadal będzie wyglądać jak zwykły gradient, ale gdy podłożymy na stronie niejednolite tło, efekt będzie już wyraźnie widoczny.