CSS-Verlauf statt Hintergrundbild auf deiner Website: So geht’s mit nur einer Zeile Code
Mit Verläufen kannst du nicht nur der kompletten Website, sondern auch Boxen oder Buttons farbliche Abwechslung, Akzente und visuelle Hervorhebung spendieren. Dank CSS3 sind solche Hintergrundgrafiken seit längerer Zeit nicht mehr notwendig, da visuelle Effekte nun mit nur einer Zeile Code umgesetzt werden können. Das kommt auch der Ladezeit der Website zugute.
Die Browserunterstützung ist sehr breit: Es wird sogar noch der Internet Explorer in Version 10 unterstützt. Hier ein einfaches Beispiel:
.infobox {
background-image: linear-gradient( 135deg, #79F1A4 10%, #0E5CAD 100%);
}
Mit dem oberen Code-Fragment in deiner CSS-Datei bekommst du einen sanften, aber dennoch kräftigen blau-grünen Verlauf, der so aussieht:
Das Ergebnis: Verlauf via CSS. (Screenshot: t3n)
Weitere Beispiele für CSS3-Verläufe findest du auf der Website Coolhue 2.0. Dort siehst du nicht nur die beiden notwendigen Farbwerte, du kannst dort mit einem Klick den CSS-Code kopieren oder herunterladen.
Einige CSS3-Verläufe zum Mitnehmen von Coolhue 2.0. (Screenshot: t3n)
Findest du dort noch nicht die richtige Farbkombination, solltest du einen Blick auf einige weitere Online-Generatoren werfen, mit denen solche Verläufe individuell erstellt werden können:
Die Vorteile von CSS3-Verläufen gegenüber Hintergrundgrafiken
Statt eines Bildes einen CSS3-Verlauf zu nutzen, hat eine Reihe von Vorteilen. Um einen CSS3-Verlauf zu erstellen und zu bearbeiten, benötigst du lediglich einen einfachen Text- oder Code-Editor – Grafikprogramme sind nicht notwendig. Zudem lädt die Seite schneller, da die Größe der Bilder gerade bei feinen Verläufen nicht unterschätzt werden darf. In dem oberen Beispiel ist die blau-grüne Hintergrundgrafik etwa 100 Kilobyte „schwer“. Der CSS-Code hingegen belegt lediglich wenige Bytes.
Zudem verursacht ein zusätzliches Bild beim Laden der Website – wenn der Server nicht HTTP/2 unterstützt – immer einen zusätzlichen HTTP-Aufruf. Verfügt die Website über viele einzelne Komponenten, kann dies das Laden der Website stark verlangsamen.
Der Code in der CSS-Datei fällt hierbei nicht ins Gewicht, da die CSS-Datei lediglich einen HTTP-Aufruf erzeugt, egal, wie viele Verläufe dort definiert sind.
Mehr zum Thema CSS: