Farbverlauf mit CSS
Publiziert am
von Christoph Eder
Durch Web 2.0-Layouts gewinnen Farbverläufe immer mehr an Beliebtheit. Diese zu erstellen ist im Prinzip relativ einfach. Man erstellt in einem Grafikprogramm einen x-Pixel hohen und 1px breiten Verlauf und lässt ihn horizontal wiederholen. Jetzt gibt es aber den Fall, dass der Verlauf sich an die Höhe anpassen soll und nicht zum Beispiel fix 50 Pixel hoch sein soll, um dann in einer anderen Farbe zu enden. Das ist mit Grafiken nahezu unlösbar, beziehungsweise sehr sehr kompliziert. Die neue CSS3-Eigenschaft gradient schafft hier abhilfe.
Die Syntax
Die Verlaufs-Funktion besteht aus bis zu 4 Argumenten:
- Verlauftyp
- Start- und Endpunkt
- Richtung
- Farbcodes
div {
background: -moz-linear-gradient( /* Verlauftyp */
top, /* Startpunkt */
#cccccc, /* Startfarbe */
#000000/* Endfarbe */
); /* Firefox 3.6+ */
background: -webkit-gradient(
linear, /* Verlauftyp */
left top, /*Startpunkt */
left bottom, /*Endpunkt */
from(#cccccc), /*Startfarbe */
to(#000000) /*Endfarbe */
); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#cccccc', /* Startfarbe */
endColorstr='#000000' /* Endfarbe */
); /* IE */
}Chris