Front-end fejlesztés

Színátmenet CSS-el

Az interneten böngészve szinte minden weboldalon találunk olyan elemeket, amelyek színátmenetesek. Ezeket weboldalkészítéskor általában egy 1px széles vagy 1px magas képpel szokás megoldani. De ez megoldható akár CSS-el is úgy, hogy az szinte böngésző független legyen. Az alábbi példa egy szürkéből, feketébe átmenő színátmenetet eredményez számunka.

background: #999; /* IE6 és barátai */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* kicsit okosabb IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* webkit böngészők, pl.: chrome, safari */
background: -moz-linear-gradient(top,  #ccc,  #000); /* firefox 3.6+ */

Arra azért felhívnám mindenki figyelmét, hogy nem minden böngésző támogatja ezt a megoldást. Itt a „modern” böngészőkre gondolok. Csak tényleg indokolt esetben használnám, illetve erre nem alapoznák site building során.