Farbverlauf mit CSS

Um einen Farbverlauf als Hintergrund zu verwenden kann man entweder
eine Grafik erstellen und als Hintergrundbild verwenden oder man verwendet einen css-Filter.

Vorteil und Nachteil:

Um eine Hintergrundgrafik als Farbverlauf zu erstellen braucht man ein gutes Grafikprogramm und muß dann dieses Bild in einer bestimmten Größe speichern ( Bsp.: 1024 x 768). Hat der Besucher aber eine andere Auflösung entstehen u.U. horizontale Scrollbalken.

Mit einem CSS-Filter entstehen diese Probleme nicht, weil es keine Hintergrundgrafik ist.

Nachteil: Nicht jeder Browser kann CSS-Filter darstellen, aber der Internet Explorer !

So sieht nun die komplette Zeile im Body-Tag aus:

<body style="filter:progid:DXImageTransform.Microsoft.Gradient
(endColorstr='#00ccff', startColorstr='#0066cc', gradientType='1');">

startColorstr > Startfarbe
endColorstr  > Endfarbe
gradientType > Steigung

 

Hier der Code zum kopieren:

 

Anmerkung:

Beim Erstellen der Seite ist der Farbverlauf im Editor nicht zu sehen, sondern nur im Browser!

 

Man kann diesen Filter natürlich auch in eine CSS-Datei einbinden und für bestimmte Objekte anwenden.
Der Eintrag würde dann so aussehen: