3

kurs

css

Lekcja 7: Gradient

css

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
comments powered by Disqus

Do góry