CSS3 im Detail: Background Gradients

von

Etwas verspätet nun auch der vierte Teil von CSS3 im Detail!

Dieses mal erwarten euch lineare und radiale Farbverläufe (engl. gradients) in CSS, mit deren Hilfe wir einige ganz hübsche Effekte erzielen können. Benutzt werden sie überall dort, wo wir eine url() angeben können. In den folgenden Beispielen werden wir sie aber im Zusammenhang mit background verwenden, indem wir statt einem Hintergrundbild den gewünschten Verlauf angeben.

Achtung, ich verwende im Artikel noch die alte Syntax. Sobald ich Zeit habe, werde ich den Text updaten. Bis dahin lest bitte folgende Dokumentation zu Farbverläufen (MDN).

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits:

Firefox Safari Opera Chrome Internet Explorer
(IE ab Version 10)

Syntax

Prinzipiell muss man zwischen zwei Arten von Farbverläufen unterscheiden:

  1. Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben
  2. Radiale Verläufe, kreisförmiger Farbverlauf von zwei oder mehr Farben

Linearer Verlauf

Zuerst einmal ein einfacher, linearer Verlauf:

1
2
3
4
5
6
7
div.lin_grad {
background:-moz-linear-gradient(top, #fff, #adf); /* Firefox */
background:-webkit-linear-gradient(top, #fff, #adf); /* Safari, Chrome */
background:-o-linear-gradient(top, #fff, #adf); /* Opera */
background:-ms-linear-gradient(top, #fff, #adf); /* IE */
background:linear-gradient(top, #fff, #adf); /* W3C Standard */
}

Anmerkung: Das Firefox Logo im Vordergrund wird als zusätzlicher Background eingebunden, siehe Teil 2.

Prinzipiell haben die Verlauf-Funktionen 4 Argumente um einen Farbverlauf näher zu beschreiben. Die Argumente sind einmal linear oder radial, welche angeben um welchen Typ von Verlauf es sich handelt. Firefox bietet 2 separate Funktionen dafür an, Safari/Chrome nutzen eine Funktion für beide Typen. Es folgen dann der Start- bzw. Endpunkt und somit die Richtung des Verlaufs. Zu guter Letzt werden noch die Farbcodes für Start- und Endfarbe benötigt.

Bei den Webkit-Browsern erscheint mir dir Syntax insgesamt etwas komplizierter. Also es kann sein, dass es auch kürzer geht aber ich bin ehrlich gesagt froh, dass ich überhaupt einen funktionierenden Verlauf mit Safari hinbekommen habe. ;)

Update 1: Mittlerweile hat Webkit die Syntax an die von Gecko angepasst, auch Opera unterstützt ab Version 11.10 lineare Verläufe mit einem eigenen Prefix.

Update 2: Die heute herausgegebene Platform Preview des Internet Explorer 10 unterstützt beide Arten von Verläufen.

Update 3: Opera 12 11.6 unterstützt radiale Verläufe per Prefix.

Radialer Verlauf

1
2
3
4
5
6
7
div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-radial-gradient(center, #fff, #adf); /* Safari, Chrome */
background:-o-radial-gradient(center, #fff, #adf); /* Opera */
background:-ms-radial-gradient(center, #fff, #adf); /* IE */
background:radial-gradient(center, #fff, #adf); /* W3C Standard */
}

Um einen radialen Verlauf zu bekommen, gehen wir genauso vor wie oben. Im Firefox ist es ganz einfach: Startpunkt, Startfarbe, Endfarbe. Webkit bereitet mir etwas Kopfzerbrechen.. soweit ich das verstanden habe, muss man hier zwei Kreise angeben mit jeweils einem Startpunkt und den Radius des Kreises, sowie Start- und Endfarbe.

Ich will das jetzt mal nicht weiter vertiefen und euch verwirren. Am besten ihr lest euch mal die Spezifikationen durch. Zwei Artikel im MDN erklären sowohl linear-gradient als auch radial-gradient (beides auf Englisch).

Fazit

Background Gradients könnten in Zukunft recht interessant werden. Lineare Verläufe werden heutzutage bereits auf fast allen Webseiten eingesetzt (Hintergründe, Buttons). Radiale Verläufe machen sich sicherlich gut, um bestimmte Sachen zu highlighten. Der größte Vorteil ist, dass somit keine Grafiken mehr gebraucht werden, die sinnlos Zeit und Bandbreite vergeuden. Die Syntax ist zwar nicht die einfachste aber mit etwas Geduld und Übung lernt man sie schon kennen. Ich hoffe, dass Webkit hier trotzdem nochmal nachbessert und die Funktion irgendwie vereinfacht. Mit Firefox hingegen kommt man recht schnell ans Ziel.

Lange Rede, kurzer Sinn: Probiert euch am besten selbst mal an den Verläufen, kombiniert eventuell das Ganze dann noch mit mehreren Backgrounds und/oder Background-Size und ihr werdet auf einige lustige Ergebnisse stoßen. Viel Spaß. :)

Die hier könnten dich auch interessieren…

36 Kommentare RSS

örgl

Das ist nicht CSS3, sondern browserspezifische Erweiterungen zu CSS. Es gibt noch keine standardisierte Syntax für Verläufe.

Norman

Erst das lesen, dann nochmal herkommen und rummotzen. ;)
Natürlich stelle ich hier browserspezifische Implementierungen des Standards vor. Mehr als Implementierungsentwürfe darf es übrigens auch noch gar nicht geben, vor allem, weil sie ja noch Einfluss auf den Standard haben können. Erst wenn der Standard abgesegnet ist, gibt es auch eine standardisierte Implementierung. Bis es soweit ist, müssen wir uns mit dem zufrieden geben, das wir vorgesetzt bekommen.

Norman

Jap, natürlich. Du kannst z.B. einfach rgba(0,0,0,0) oder transparent als einen der Farbwert-Parameter benutzen. :)

Anonymous

[...] Mit css3 CSS3 im Detail: Background Gradients – Norman's Blog [...]

chris

wie bindet man den HG dann ein, wenn man die definitionen hat?

chris

Danke für deine Antwort.
Ich hab es reingeschrieben

1
2
3
4
div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-gradient(radial, center center, 80, center center, 400, from(#fff), to(#adf)); /* Safari, Chrome */
}

und der HG ändert sich nicht.
Was mache ich falsch?
Danke :-)

Norman

1. wo hast du das reingeschrieben?
2. brauchst du im quellcode dann natürlich ein div mit der Klasse rad_grad

chris

also ich hab es ungefähr so:

1
2
3
4
5
@import "menu/menu_style.css";>
div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-gradient(radial, center center, 80, center center, 400, from(#fff), to(#adf)); /* Safari, Chrome */
}

<div class ="div.rad_grad"
RESTLICHE SEITE

klappt aber nicht. woran könnte das liegen?
schönen Dank!

chris

ware ueber hilfe sehr dankbar zur einbindung

Norman

Hi Chris, sry ich mach tagsüber auch noch andere Sachen ;)
Also ich weiß nicht genau, wo du das oben her hast aber es sieht mir ziemlich falsch aus.. lies dir doch mal das hier bisschen durch http://de.selfhtml.org/css/formate/einbinden.htm da wird gezeigt, wie man CSS richtig einbindet. Wenn du dann immer noch nicht weiterkommst, kannst du mir auch ne E-Mail schreiben. Viel Erfolg :)

Jan

Weils sehr gut passt.. bin auf dieses Framework gestoßen: http://7synth.com/dev/gradients . Leider nicht css-only, aber dafür in wirklich jedem Browser lauffähig.
Wäre auf jedenfall schön, wenn HTML&CO endlich auch mal in der Praxis zum Standard werden, aber ich glaube das werde ich nicht mehr erleben..

CSS 3 rulez

Die Möglichkeiten von CSS 3 erfüllen endlich jede Design-Träume. Schaut mal mit aktuellem Firefox oder Chrome auf diesen Blog, da sieht man in praktischer Anwendung, was alles möglich ist. Runde Ecken, Transparenzeffekte, Farbverläufe, Schatten, CSS3-Buttons. Eine wahre Freude! Wer mit dem IE vorbeikommt, kriegt nur eine Fallback-Lösung. :-)

Manfred

Hallo Norman
Deine Browser-Angaben kann ich nicht nachvollziehen. Ich habe auf Windows7 folgende Browser getestet (deine Webseite)
Avant, Flock, Opera11,Safari5,IE9, Firefox 3.6 und Chrome neueste Version. Nur Firefox und Chrome haben den Verlauf gezeigt, alle anderen nur eine leere Fläche
Auf dem Mac ein ähnliches Bild. Nur Firefox (Chrome habe ich nicht getestet) zeigt den Verlauf. Weder Safari noch Opera machen da mit.
Schade eigentlich
Manfred

Norman

Hallo Manfred, danke dass du mich auf das Problem aufmerksam gemacht hast.

Folgendes:
1) Safari scheint doch noch nicht die neue Syntax zu unterstützen, ich hatte mir die extra Zeile bei den Beispielen gespart und nur im Chrome geprüft (Faulheit zahlt sich eben nur selten aus ;) ) jedenfalls ist die Zeile wieder drin und die Beispiele funktionieren in Safari wieder prächtig.

2) Damit die Beispiele (zumindest für lineare Verläufe) auch in Opera funktioneren, brauchst du die aktuelle Beta Version 11.10, mit dem 11.0 Release wirst du keinen Erfolg haben.

3) Was die anderen Browser angeht, kann ich keine großen Auskünfte machen. Ich weiß nur, dass IE9 es derzeit nicht unterstützt. Wenn es so wäre, hätte ich ihn weiter oben mit aufgelistet.

Ich hoffe, das hilft dir weiter und danke nochmal. :)

Bernd

Vielen Dank für die Tipps,
ich komme immer mal wieder hier hin um mir das anzuschauen ;)

Für die Verläufe sollte es endlich mal eine Vereinheitlichung geben, alle Browser wollen immer was anderes, das nervt auf Dauer tierisch ~.~!

Vor allem weil ich in eines meiner neueren Projekte diese Verläufe nutze :)

Grüße!

Webstandard-Blog

@Manfred: Falls du für Opera noch eine Unterstützung des Farbverlaufes für ältere Versionen benötigst kann ich dir noch einen SVG Ansatz für den linearen Farbverlauf, den ich im letzten Jahr in meinem Blog (entschuldige die “Werbung” Norman) näher vorgestellt habe.

Trinita

Vielen Dank für den Artikel. Du schreibst: “Prinzipiell haben die Verlauf-Funktionen 4 Argumente um einen Farbverlauf näher zu beschreiben. Die Argumente sind einmal linear oder gradient, welche angeben um welchen Typ von Verlauf es sich handelt.”

Muss es nicht heißen: “Die Argumente sind einmal linear oder _radial_”?

René

Hallo Norman,

erstmal vielen Dank für deinen Artikel.
Ich bastle gerade eine neue Homepage und wollte es mal mit dem Farbverlauf im Hintergrund probieren. Der Farbverlauf funktioniert soweit, aber nich über die gesammte seite, sondern nur pro Zeile.

Der css eintrag sieht so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.body {
/* IE10 */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #2EFE5C));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
}

und der html eintrag so:

Startseite

Willkommen

Hoffe du kannst mir helfen.

René

Der html code wurde nicht ganz übernommen, ein neuer versuch:

html
head
title>StartseiteWillkommen</p
/div
/body
/html

Johannes

Ich finde die Seite sehr gut, weil hier auch über die Funktionsweise im Detail diskutiert wird. Da ich css3 “Neuling” bin hat die Seite mir sehr geholfen.
Schade, dass IE. erst in den neuesten Versionen, die jetzt kommen Css3 anfängt zu unterstützen. Am Anfang dachte ich das gibt eine schöne “Präfix-Hölle”, aber dem ist nicht so.
Ich habe außerdem mir die CSS3-Backgroundgeneratoren, die so im Netz rumfliegen angesehen, da kann man aus den Codes, die man bekommt wertvolle Informationen entnehmen.

NinJa

Hi!

Super Erläuterung, dafür zunächst mal DANKE! :)
Wenn ich aber die -moz-linear-gradient und -webkit etc. notiere und dann einen W3C check mache, sagt mir der Check, dass das nicht stimmt. Eine Idee dazu? Warum ignoriert das W3C nicht oder versteht nicht, dass die Notiation für die verschiedenen Browser nötig ist?

Norman

Hallo NinJa,

der Validator checkt nur den eigentlichen Standard, also ohne Vendor-Prefix, alles andere kennt er nicht und spuckt deswegen die Fehler aus. Du kannst sie aber getrost ignorieren, du weißt ja, was du tust. ;)

Norman

Danke für die Richtigstellung Gunnar, ich werd es zeitnah ändern. :)

gwa

Hallo, erstmal danke für dieses tut. Kann mir vieleicht jemand den Fehler sagen wieso der Effekt nur in moz. zu sehen ist?

#topnav_wrap {
background:-moz-linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;
background:-ms-linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;
background:-webkit-linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;
background:-o-linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;
background:linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;

overflow: inherit;
}

Vielen dank!

Volker

Hallo und guten Abend :-)

also ich finde dieses css-Ansatz, Hintergundfarben mit Verläufen zu versehen hochinteressant. Ich hab mal ein wenig gebastelt mit einem Gradient Generator, um einen hübschen Verlauf hinzubekommen. Jetzt kommt das Problem: Binde ich den Verlauf über die bekannte Syntax ein, wird der Verlauf im Browser (FF) gekachelt. Sieht grauenerregend aus. Wie kann ich also verhindern, dass der Verlauf gekachelt wird?

Danke und nette Grüße

grunge

geht NICHT:
background:linear-gradient(top, #17b, #eee); /* W3C Standard */

geht:
background:linear-gradient(to bottom, #17b, #eee); /* W3C Standard */

Beste Grüsse und Danke
le Grunge

Markus

Für IEs kleiner als 10 gibt es eine Möglichkeit, den Verlauf wenigstens von oben nach unten linear darzustellen und zwar mit:

body {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#00BFFF’, endColorstr=’#FFEBCD’); /* IE6 & IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#00BFFF’, endColorstr=’#FFEBCD’)”; /* IE8 & 9 */
}

Der IE 10 akzeptiert den W3-Standard ohne Vendor-Prefix mittlerweile problemlos.

Marino

Hi, du sagst, dass die Bilder, die durch Styles ersetzt werden, und das dann weniger Zeit braucht. Das stimmt nur teilweise, denn dadurch werden die CSS-Files größer, die du dann lädst.

Norman

Hi Marino,
der Unterschied zwischen einer ganzen Bilddatei und einigen Zeilen CSS Code ist aber groß bis gigantisch. Außerdem spart man Ladezeit durch weniger http-Abfragen.

Kommentieren