Drei Arten, um einen Hintergrund-Verlauf per CSS zu erzeugen
Durch ein Hintergrundbild als Verlauf (Background-Gradient) können einzelne Elemente oder die gesamte Webseite optisch aufgewertet werden. Hierzu gibt es mehrere Möglichkeiten die ich im Folgenden kurz vorstellen werde.
Verlauf durch Einbindung eines kompletten ausfüllenden Hintergrundbildes
Vorteile:
- Darstellung von komplizierten Verläufen möglich
- funktioniert browserübergreifend
Nachteile:
- statisch und unflexibel
- großes Ladevolumen
Beispiel:
background: url("../image/hintergrund-verlauf.png") no-repeat;
}
komplettes Hintergrundbild
Größe: 13,5 kByte
Verlauf erzeugt durch ein 1px breites/hohes Hintergrundbild
Vorteile:
- geringeres Ladevolumen als bei einem kompletten Hintergrundbild
- evtl. als CSS-Sprite mit anderen Graphiken kombinierbar
- dadurch maximal ein zusätzlicher Request notwendig
- funktioniert browserübergreifend
Nachteil:
- nur Verläufe in eine Richtung möglich (horizontal oder vertikal)
Beispiel:
background: url("../image/hintergrund-verlauf-1px.png") repeat-x;
}
1px breites Hintergrundbild
Größe: 390 Byte
Verlauf erzeugt durch Cascading Style Sheets (CSS3)
Vorteile:
- geringstes Ladevolumen, da kein zusätzliches Bild notwendig ist
- deshalb auch kein zusätzlicher Request
- komplizierte Verläufe sind ebenfalls möglich
Nachteile:
- funktioniert noch nicht browserübergreifend, da CSS3 nur von modernen Browsern unterstützt wird
- CSS ist etwas komplexer, da für diverse Browserfamilien die jeweiligen Vendor-Prefixe (z.B. -moz, -o, -webkit) ergänzt werden müssen. Dabei helfen aber z.B. Online-Generatoren
- für ältere Internet-Explorer ist ein Workaround über Alpha-Filter notwendig, der nicht W3C-konform ist oder die Verwendung von diversen anderen Hacks.
Beispiel (generiert mit diesem CSS Gradient Generator):
background: #2988d7; /*Old browsers*/
background: -moz-linear-gradient(left, #2988d7 0%, #ffffff 100%); /*FF3.6+*/
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2988d7), color-stop(100%,#ffffff)); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(left, #2988d7 0%,#ffffff 100%); /*Chrome10+,Safari5.1+*/
background: -o-linear-gradient(left, #2988d7 0%,#ffffff 100%); /*Opera 11.10+*/
background: -ms-linear-gradient(left, #2988d7 0%,#ffffff 100%); /*IE10+*/
background: linear-gradient(to right, #2988d7 0%,#ffffff 100%); /*W3C*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2988d7', endColorstr='#ffffff',GradientType=1 ); /*IE6-9*/
}
ohne Hintergrundbild
reines CSS
Fazit
Obwohl Verläufe, die über CSS3 realisiert werden, noch nicht von allen Browsern korrekt interpretiert werden, würde ich diese Variante eindeutig bevorzugen und empfehlen. Zusätzlich sollte man einen einfarbigen Hintergrund (background-color) angeben. Sofern ein Browser Verläufe über CSS3 noch nicht unterstützt, würde in diesem Fall nur dieser einfarbige Hintergrund erscheinen. Somit ist die Funktion der Webseite für diese älteren Browser nicht eingeschränkt. Es sieht nur nicht ganz so hochwertig aus.