Hintergrundbilder sind ein beliebtes Mittel um das Aussehen der Website zu beeinflussen. Vielfach werden anstatt Fotos Hintergrundgrafiken mit Verläufen eingesetzt. Damit kann man der kompletten Website, Boxen oder Buttons farbliche Akzente, Abwechslung und visuelle Hervorhebung spendieren.
Doch Dank CSS3 sind solche Grafiken seit längerer Zeit nicht mehr notwendig, da man diese Effekte mit einer Zeile Code umsetzen kann. Die Browserunterstützung ist sehr breit. Hier ein einfaches Beispiel:
.hinweis {
background-image: linear-gradient( 135deg, #79F1A4 10%, #0E5CAD 100%);
}
Weitere Beispiele für CSS3-Verläufe findest du auf der folgenden Website: https://webkul.github.io/coolhue/. Dort siehst du nicht nur die beiden Farbwerte, du kannst dort mit einem Klick den Code kopieren oder herunterladen.
CSS3-Verläufe zum mitnehmen
Wer auf der oben genannten Seite keine richtige Farbkombination gefunden hat, der findet bei der Websuche einige Online-Generatoren mit denen er solche Verläufe individuell erstellen kann. Unter anderem hier und hier.
Nachtrag: Manuel hat unten im Kommentar noch einen weiteren Generator genannt: https://uigradients.com.
Vorteile von CSS-Verläufen gegenüber Grafiken
- Um einen solchen Verlauf zu erstellen und zu bearbeiten benötigt man lediglich einen einfachen Texteditor. Ein Grafikprogramm ist nicht notwendig.
- Ein Bild verfügt über eine Dateigröße und die ist bei feinen Verläufen nicht zu unterschätzen. Im oberen Beispiel hat die blaugrüne Hintergrundgrafik 100 kbyte. Der Code dagegen belegt lediglich wenige Bytes.
- Ein zusätzliches Bild verursacht beim Laden der Website – wenn der Server nicht http/2 unterstützt – immer einen zusätzlichen http-Aufruf. Verfügt eine Website über viele einzelne Komponente, dann kann dies das Laden der Website 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.