Gradient to nowy i ciekawy sposób na urozmaicenie strony www.
Gradient tła ustalamy za pomocą background-gradient.
selektor { background-gradient: wartość; }Gradient liniowy
W przypadku gradientu liniowego wartość ma postać:
selektor { background: linear-gradient: a, b c, d e; }- a – kierunek
- to right – z lewej do prawej
- to left – z prawej do lewej
- to top – z dołu do góry
- to bottom – z góry do dołu
- to right top, to right bottom, to left top, to left bottom – na ukos
- b – pierwszy kolor
- c – odległość początkowa
- d – drugi kolor
- e – odległość końcowa
body { background: linear-gradient(to top, aqua, blue); }Przykład
Ustalając styl dla poszczególnych elementów strony trzeba pamiętać, że nie wszystkie przeglądarki poprawnie interpretują deklaracje CSS3. Niektóre wymagają oddzielnej implementacji.
/* Dla starszych przeglądarek */
body { background: blue; }
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, left top, left bottom, from(aqua), to(blue));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, aqua, blue);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, aqua, blue);
/* IE 10 */
background: -ms-linear-gradient(top, aqua, blue);
/* Opera 11.10+ */
background: -o-linear-gradient(top, aqua, blue);
Gradient kołowy
W przypadku kołowego wartość ma postać:
selektor { background: radial-gradient: a b at c, d e, f g; }- a – kształt
- circle – okrąg
- ellipse – elipsa
- b – rozmiar
- closed-side – promień gradientu do najbliższego punktu od środka
- farthest-side – promień gradientu do najdalszego punktu od środka
- closed-corner – promień gradientu do najbliższego narożnika od środka
- farthest-corner – promień gradientu do najdalszego narożnika od środka (domyślny)
- c – pozycja punktu środkowego
- d – odległość początkowa
- e – drugi kolor
- f – odległość końcowa
body { background: radial-gradient(ellipse farthest-corner at 20% 50%, green, lime); }
Przykład