chevron-left chevron-right

[CSS] Jak utworzyć gradienty w CSS? – Prezentacja obecnych możliwości przeglądarek.

Do tej pory, aby utworzyć elementy zawierające gradient, należało zaprojektować je w programie graficznym, a następnie stamtąd je wyciąć i za pomocą standardowego atrybutu CSS - background, wstawić ten element w kod strony. To miało swoje zalety jak i wady.
Do zalet można zaliczyć fakt, że element zawsze będzie wyglądał tak samo w każdej przeglądarce, bo jest to plik graficzny. Natomiast minusem takiego rozwiązania jest waga takiego pliku, bo jak wiadomo w dzisiejszych czasach wszystkim (a już najbardziej Google) zależy na jak najszybszym ładowaniu się strony WWW. Lecz od jakiegoś czasu można zmienić nieco podejście. Wraz z wprowadzeniem nowej wersji CSS3, dostarczono nam mnóstwo możliwości o których można było tylko pomarzyć. Między innymi obsługę gradientów z poziomu CSS.

Idea gradientu w CSS

Gradienty pozwalają uzyskać efekt przejścia z jednego koloru w drugi w okreslonym elemencie strony, np. przycisku czy jako tło menu. Mamy dostępne dwa warianty gradientu:
  • liniowy (linear)
  • kolisty (circular)
Warianty te w większości przypadków pozwolą na uzyskanie wymaganego efektu bez użycia programów graficznych.

Gradient liniowy w CSS

Jak to zwykle bywa z nowymi rzeczami wprowadzanymi przez CSS3 nie wszystko działa idelanie w każdej przeglądarce, dlatego część z nich ma inną implementację niż inne.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#gradient1	{
	/* fallback, czyli wersja dla starych przeglądarek */
	background-color:#063053;
	/* chrome 2+, safari 4+; wielokrotne zatrzymania kolorów */
	background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(#063053,#395873,#5c7c99);
	/* firefox; wielokrotne zatrzymania kolorów */
	background-image:-moz-linear-gradient(top,#063053,#395873,#5c7c99);
	/* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	/* ie8 + */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
	/* ie10 */
	background-image: -ms-linear-gradient(#063053,#395873,#5c7c99);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#063053,#395873,#5c7c99);
	/* wersja standardowa */
	background-image: linear-gradient(#063053,#395873,#5c7c99);
}
Jak widać, różnorodność wersji składniowych może przyprawić o ból głowy. Dlatego mam nadzieję, że wkrótce jako całkowity standard wejdzie wersja ostatnia z powyższego przykładu.

W momencie, gdy zależy nam na gradiencie liniowym ukośnym, możemy wykorzystać nastepującą składnię:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#gradient2	{
	/* fallback, czyli wersja dla starych przeglądarek */
	background-color:#063053;
	/* chrome 2+, safari 4+; wielokrotne zatrzymania kolorów */
	background-image:-webkit-gradient(linear,left bottom,right top,color-stop(0.32,#063053),color-stop(0.66,#395873), color-stop(0.83,#5c7c99));
	/* chrome 10+, safari 5.1+ */
	background-image:-webkit-linear-gradient(45deg,#063053,#395873,#5c7c99);
	/* firefox; wielokrotne zatrzymania kolorów */
	background-image:-moz-linear-gradient(45deg,#063053,#395873,#5c7c99);
	/* ie10 */
	background-image: -ms-linear-gradient(45deg,#063053 0%,#395873 100%);
	/* opera 11.1 */
	background-image: -o-linear-gradient(45deg,#063053,#395873);
	/* The "standard" */
	background-image: linear-gradient(45deg,#063053,#395873);
}
Jeśli chodzi o odpowiednie wsparcie gradientów przez Internet Explorera, to zaleca się stosować "komentarze warunkowe", aby odpowiednie składnie Internet Explorera się nie kłóciły ze sobą.
1
2
3
4
5
6
7
8
<!--[if lt IE 10]>
<style>
.gradientElement {
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
}
</style>
<![endif]-->

Gradienty kołowe w CSS

Gradienty kołowe w porównaniu do liniowych różnią się trochę składnią. Należy pamiętać o tym, że taki gradient zawsze się zaczyna od środka. Jeśli chodzi o wsparcie dla gradientów kołowych przez Internet Explorera, to mam smutną wiadomość i dość przewidywalną - IE nie wspiera gradientów kołowych ... na razie..
W przeglądarkach które korzystają z silnika WebKit (Google Chrome i Safari) występuje problem z nadmiernie rozbudowaną składnią dla tego typu gradientu, który wygląda tak:
1
2
3
4
/* podstawa */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));
/* zatrzymania kolorów */
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20,red),color-stop(0.40,green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange));
Prawda, że strasznie? Jak tak uważam. Jedynym pocieszeniem jest to, że planowana jest zmiana składni na prostszą w przyszłości.
Bazowa wersja gradientu kołowego dla większości przeglądarek wygląda następująco:
1
2
3
4
5
6
#gradient3 {
	background-image: -moz-radial-gradient(orange, red);
	background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* stara składnia */
	background-image: -webkit-radial-gradient(orange, red); /* nowa składnia */
	background-image: radial-gradient(orange, red);
}
Wersja nieco bardziej rozbudowana wygląda następująco:
#gradient4 {
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}

Kilka porad odnośnie gradientów

Jak widać, stosowanie gradientów może być problematyczne dla początkujących, ale na dłuższą metę przydatne. Oto kilka porad odnośnie gradientów: - jeśli chcesz wykorzystać przezroczystość, to jako oznaczenia koloru zamiast trybu HEX (#000000) wykorzystaj tryb rgba(255.255.255.0) - pamiętaj o używaniu tzw. fallbacków, czyli ustawień koloru dla starszych wersji przeglądarek - dla przeglądarek typu Firefox czy Chrome można użyć dodatkowych właściwości repeating-radial-gradient oraz repetaing-linear-gradient. Demo z tego artykułu można znaleźć w tym miejscu: gradienty CSS (będzie wkrótce). Artykuł zainspirowany tym artykułem.
A przy okazji tego artykułu korzystałem z nowego edytora graficznego dostępnego pod tym adresem.

  • KejeN

    Bardzo pomocny wpis – wszystko nt gradientów w jednym miejscu.
    P.S: No i wreszcie po miesiącu jakiś nowy wpis:)

  • w najbliższym czasie będzie jeszcze kilka nowych wpisów na blogu 🙂

  • Przydatny wpis, ale nazwanie gradientu radialnego kołowym akurat w tym wypadku prowadza zamieszanie, bo opisując gradienty piszesz:
    kolisty (circular)
    A parametr CSS nazywa się radial – owszem, słówko „radialny” jest zapożyczeniem z angielszczyzny, ale utarło się to w literaturze nie tylko IT.

    Jedyne co nie podoba mi się w gradientach to sposób ich definiowania dla webkita – jest on po prostu zbyt rozwlekły…

  • Lime Factory

    Jakiś czas temu pisałem posta właśnie o gradientach CSS
    http://bit.ly/iOipci i myślę, że generator, o którym pisałem może nie jednemu z nas programistów pomóc w wielu momentach zaoszczędzić czas:)

  • Ja powstrzymam się z takimi efektami do czasu kiedy wszystkie przeglądarki zaczną to poprawnie interpretować. Na razie 1px szerokości grafika rozciągana w CSS musi wystarczyć 🙂

  • Wydaje mi się, że trzeba się będzie przyzwyczaić do tego, że różne przeglądarki zawsze będą miały różne podejście do niektórych opcji CSS. Dlatego czasem warto stosować niektóre efekty kosztem kompatybilności z innymi przeglądarkami. Można w ten sposób „premiować” użytkowników danej przeglądarki 😉

  • Jakub

    Czy gradienty są obecnie akceptowane i poprawnie wyświetlane we wszystkich przeglądarkach?

  • Piotr Nalepa

    Są poprawnie wyświetlane we wszystkich nowych wersjach przeglądarek.

  • Adam

    Może wiecie czemu nie działa to w moim FF wersja 15? Na konsoli pokazuje mi błąd „Deklaracja opuszczona” dla pierwszego -webkit no i widać jedynie jednokolorowe tło, a nie gradient. Na Chrome jest OK.