Anzeige
Anzeige
Ratgeber
Artikel merken

CSS-Verlauf statt Hintergrundbild auf deiner Website: So geht’s mit nur einer Zeile Code

Hintergrundgrafiken und -bilder sind ein beliebtes Mittel, um Webprojekte optisch zu gestalten. Wir erklären dir, wie du statt Bildern Hintergrundgrafiken mit Verläufen einsetzen kannst.

Von Vladimir Simović
2 Min. Lesezeit
Anzeige
Anzeige
CSS-Code (Foto: Melody Smart/Shutterstock)

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige
Das Ergebnis: Verlauf via CSS

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.

Anzeige
Anzeige
Einige CSS3-Verläufe zum mitnehmen von Coolhue 2.0.

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.

Anzeige
Anzeige

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:

Mehr zu diesem Thema
CSS
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
8 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Vinz

Hiermit bekommt man dann auch pulsierende Farbverläufe hin, wenn man auf die älteren Browser pfeift:

.infobox {
animation: pulse 24s infinite;
}

@keyframes pulse {
0% {
background-color: #001F3F;
}
50% {
background-color: #9BBA7A;
}
100% {
background-color: #001F3F;
}
}

Antworten
Vladimir Simović

Hallo Vinz,

danke für den Hinweis.

Antworten
HKN Webdesign Stuttgart

Super Beitrag. Heutzutage kann man so vieles mit dem CSS Code machen. Was in diesem Beitrag fehlt, ist auf die Komprimierung der CSS Dateien zu achten. Hierzu gibt es super kostenlose tools, um die CSS Dateien zu komprimieren.

Antworten
Christoph

Also jeder der sich mit dem Thema CSS3 beschäftigt hat, weiß dass es möglich ist Verläufe zu gestalten. Daher finde ich den Artikel eher sinnlos und uninteressant!

Antworten
dennis

Auf einem Portal wie diesem, einfach richtig!

Antworten
Vladimir Simović

Hallo Christoph,

da muss ich widersprechen, nicht jeder der sich mit CSS3 beschäftigt hat, kennt dies im Detail. Zum anderen lesen hier viele Leute, die sich mal vor langer Zeit mit CSS beschäftigt haben, oder es vor haben.

Antworten
Miss Peabody

Hey, du schreibst für t3n! :))
Eins meiner Lieblings-Newsportale!
Schöne Grüße!

Antworten
Lupopa

Moin,
Dein obiger Code wird auf dem Smartphone nicht richtig dargestellt…
Der Code macht keinen automatischen Zeilenumbruch.

Er lässt sich aber komplett kopieren.

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige