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:
Syntax
Prinzipiell muss man zwischen zwei Arten von Farbverläufen unterscheiden:
- Lineare Verläufe, geradliniger Farbverlauf von zwei oder mehr Farben
- 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ß.
37 Kommentare RSS
Social comments and analytics for this post…
This post was mentioned on Twitter by _Poldi: Currently reading: http://www.normansblog.de/css3-im-detail-background-gradients/
Das ist nicht CSS3, sondern browserspezifische Erweiterungen zu CSS. Es gibt noch keine standardisierte Syntax für Verläufe.
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.
Funktionieren auch Verläufe von oder nach Transparent?
Liebe Grüße,
Gast
Jap, natürlich. Du kannst z.B. einfach
rgba(0,0,0,0)
odertransparent
als einen der Farbwert-Parameter benutzen.[...] Mit css3 CSS3 im Detail: Background Gradients – Norman's Blog [...]
wie bindet man den HG dann ein, wenn man die definitionen hat?
Hallo Chris, wie meinst du das? Das schreibst du einfach in deine CSS Datei.
Wenn du noch nicht viel von CSS verstehst, hilft dir vielleicht mein kleiner Einführungskurs weiter.
Danke für deine Antwort.
Ich hab es reingeschrieben
und der HG ändert sich nicht.
Was mache ich falsch?
Danke
1. wo hast du das reingeschrieben?
2. brauchst du im quellcode dann natürlich ein
div
mit der Klasse rad_gradalso ich hab es ungefähr so:
<div class ="div.rad_grad"
RESTLICHE SEITE
klappt aber nicht. woran könnte das liegen?
schönen Dank!
ware ueber hilfe sehr dankbar zur einbindung
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
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..
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.
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
Hallo Manfred, danke dass du mich auf das Problem aufmerksam gemacht hast.
Folgendes:
) jedenfalls ist die Zeile wieder drin und die Beispiele funktionieren in Safari wieder prächtig.
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
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.
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!
@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.
Danke Dir! Ein sehr cooles Tutorial!
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_”?
Da hast du völlig recht Trinita, danke dir.
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:
und der html eintrag so:
Startseite
Willkommen
Hoffe du kannst mir helfen.
Der html code wurde nicht ganz übernommen, ein neuer versuch:
html
head
title>StartseiteWillkommen</p
/div
/body
/html
Hallo nochmal,
fehler gefunden. Es fehlt noch folgender eintrag
background-attachment: fixed;
Trotzdem Danke
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.
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?
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.
Der Validator sollte vor allem beim präfixfreien Wert meckern, denn linear-gradient(top, #fff, #adf) ist (mittlerweile) falsch, s. http://www.1stwebdesigner.com/css/mastering-css-gradients-in-less-than-1-hour/#comment-205142 Richtig ist linear-gradient(to bottom, #fff, #adf) oder linear-gradient(#fff, #adf)
Danke für die Richtigstellung Gunnar, ich werd es zeitnah ändern.
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!
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
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
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.
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.
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.
Gentles suggested shadowing immoral get cheap antibiotics white power bill would help tobias find the information for the longevity. Huge Selection Greensboro Order antibiotics Without Rx antibiotics Fast deliveri Cheap Buy antibiotics Cod Delivery Is any chemist selling safe antibiotics breast cancer treatment pills over the net?.