POZOR! Článek jsem napsal před více jak rokem, a tudíž už nemusí reflektovat můj nynější názor nebo může být zastaralý.
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:
Znáte někoho, komu by článek mohl pomoct? Zasdílejte mu ho :)