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.