CSS3: Gradient

Publikováno Webdesign

Gradienty, neboli přechody se v CSS začaly vyskytovat poměrně nedávno a jejich použití je možné pouze v nejnovějších verzí prohlížečů. Pro zajištění co nejširší podpory je nutné použít prefix (-o-, -ms-, -webkit-, -moz-).

Lineární přechod

Lineární přechod umožňuje funkce linear-gradient().

Použití:

background: -webkit-linear-gradient(#000, #FFF);   /* Chrome 10+ */
background: -moz-linear-gradient(#000, #FFF);      /* Firefox 3.6+ */ 
background: -o-linear-gradient(#000, #FFF);        /* Opera 11.10+ */
background: -ms-linear-gradient(#000, #FFF);       /* IE 10+ */

Demo:

Také je možné určit prvním parametrem, kde bude přechod začínat. Výchozí hodnota je „top“. (top | bottom | left | right)

Použití:

background: -webkit-linear-gradient(left, #000, #FFF);   /* Chrome 10+ */
background: -moz-linear-gradient(left, #000, #FFF);      /* Firefox 3.6+ */ 
background: -o-linear-gradient(left, #000, #FFF);        /* Opera 11.10+ */
background: -ms-linear-gradient(left, #000, #FFF);       /* IE 10+ */

Demo:

Radiální přechod

Radiální přechod umožňuje funkce radial-gradient(). První parametr určuje tvar. Výchozí tvar je kruh – „circle“, další možností je elipsa – „elipse“.

Použití:

background: -webkit-radial-gradient(circle, #000, #FFF);   /* Chrome 10+ */
background: -moz-radial-gradient(circle, #000, #FFF);      /* Firefox 3.6+ */ 
background: -o-radial-gradient(circle, #000, #FFF);        /* Opera 11.10+ */
background: -ms-radial-gradient(circle, #000, #FFF);       /* IE 10+ */

Demo:

Komentáře