Um einen Hintergrund-Verlauf (gradient) mit CSS3 umzusetzen, musst du derzeit für Webkit (Safari, Chrome) und Mozilla (Firefox) noch unterschiedlichen CSS-Code nutzen. Da Internet Explorer und Opera derzeit leider noch keine CSS3 Verläufe unterstützen, kannst du für diese Browser entweder eine alternative Hintergrund-Farbe wählen, oder wie gewohnt ein JPG-Image als Verlauf einsetzen.
CSS3-Verlauf für Safari, Google Chrome (Webkit)
Der CSS-Code für dieses Beispiel sieht so aus:
background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF9900), to(#99FFCC));
Erklärung:
Als ersten Wert gibst du an, ob der Verlauf linear oder radial sein soll. Dann folgen die x- und y-Koordinaten für die Anfangsposition des Verlaufs (0, 0 also links oben). Danach gibst du die x- und y-Koordinaten für die Endposition des Verlaufs an (0, 100%, also links unten). Als nächstes gibst du die Farben des Verlaufs an, also von orange zu Türkis (from(#FF9900), to(#99FFCC)).
Firefox Browser (Mozilla)
Der Code für dieses Beispiel sieht so aus:
background: -moz-linear-gradient(top, #00CCCC, #00FF99);
Erklärung:
Die Art des Verlaufs (linear oder radial) wird bereits im Wert selbst festgelegt (moz-linear-gradient). Erster Wert ist die Position für den Beginn des Verlaufs (hier: top). Dann folgt die erster Farbe (#00CCCC) gefolgt von der zweiten Farbe (#00FF99).
Weitere Optionen
Natürlich kannst du den Verlauf auch nur bis zu einem bestimmten Punkt laufen lassen.
Der Code für dieses Beispiel sieht so aus:
background: #CCFFCC; /*alternative Hintergrundfarbe für IE*/ background: -webkit-gradient(linear, 0 0, 0 20%, from(#CCFF66), to(#fff)); background: -moz-linear-gradient(top, #CCFF66, #fff 20%);
Willst du einen mehrfarbigen Verlauf erstellen, nutzt du die Funktion Color-Stop:
Der Code sieht dann so aus:
background:#CCFFCC; /*alternative Hintergrundfarbe für IE*/ background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCFF66), color-stop(20%, white), color-stop(60%, yellow)); background: -moz-linear-gradient(top, #CCFF66, white 20%, yellow 60%);
Für Mozilla gibst du an, dass du bei 20% des Verlaufs bei Weiß angekommen sein willst. Für Webkit nutzt du einen zweiten color-stop und legen fest, bei wie viel Prozent welche Farbe erscheinen soll.
Wie du siehst kannst du mit CSS3 gradients schnell wunderschöne Verläufe erzeugen. Für ältere Browser-Versionen, sowie IE6, 7, 8 und Opera kannst du, falls der Verlauf für das Design nicht unbedingt notwendig ist, eine alternative Hintergrund-Farbe wählen. So kannst du das Laden eines extra Bildes vermeiden.
Ich hoffe dir hat mein kleiner Beitrag über CSS3-Verläufe gefallen :-)
Was denkst du über den Einsatz von CSS3? Würdest du die neuen CSS3-Methoden bereits einsetzen, und in Kauf nehmen, dass deine Seite nicht in allen Browsern gleich aussieht. Oder denkst du es ist sinnvoller abzuwarten, bis wirklich alle Browser CSS3 unterstützen?
Deine Meinung zum Thema interessiert mich sehr. Schreibe mir doch einfach einen Kommentar!
Über entsprechende Filter des Microsoft-Browser kann man den IE-Versionen aber auch recht einfach einen Farbverlauf zuweisen (siehe CSS3 - Sliding Menu - Step 3).
@Webstandard-Blog: Vielen Dank für deinen Kommentar und den Hinweis bzgl. der Microsoft-Filter. Mhhh, immer dieser IE ;-)
Gruß
Ellen
Hallo Ellen, sehr schön, dein kleines Tutorial. Selber setze ich CSS3 auch um. Allerdings nur dort, wo es »schmückenden« Charakter hat. Denn Webseiten sollten vorrangig informativ und dann noch vernünftig benutzbar sein.
Ich finde es sehr spannend, was man mit CSS3 und nur ein paar kleinen Zeilen Code alles machen kann. Erspart es doch einiges an Grafiklast! Und Spaß macht es obendrein!
Kreative Grüße aus Vorarlberg
Heike
@Heike: Vielen Dank für dein Feedback :-)
Ich finde du hast recht, derzeit macht ein großflächiger Einsatz von CSS3-Techniken noch nicht sehr viel Sinn, da man immer auf die verschiedenen Browser eingehen muss. Aber man muss ja schon einmal für die Zukunft üben ;-)
Das Webdesign durch CSS3 so viel praktischer wird, finde ich auch genial :-)
Viele Grüße
Ellen
WOW kannte ich noch nicht, wahrscheinlich weil es für mich als Entwickler und Designer noch keine Relevanz hat weil es ja noch nicht im IE/Safari funktioniert…
3-5 Jahre dann wird man es vieleicht benützen können (solange wird denke ich der IE8 noch in der Benutzung sein )
Aber man kann ja schon mal üben :D
@Andreas: Vielen Dank für deinen Kommentar und dein Feedback zu den CSS3-Verläufen. Ich denke ebenfalls, dass es sinnvoll ist die neuen CSS-Techniken im Auge zu behalten bzw. zu testen. Und hier und da kann man sie auch bestimmt schon einsetzen.
Oh je, 3-5 Jahre, hoffentlich geht das ein bisschen schneller ;-) Der neue IE9 soll ja anscheinend nicht übel werden. Ich habe neulich einen Artikel darüber gelesen. Weisst du eventuell mehr darüber?
Viele Grüße
Ellen
Ich habe ein kleines Problem mit dem gradient: Er geht nur bis zum Ende des letzten div-Elements, dann wiederholt er sich (vertikal).
Wie kann ich den gradient über die ganze Seite laufen lassen?
@Patrick: Vielen Dank für deinen Kommentar :-)
Willst du den Gradient als Hintergrund einfügen, gibst du am besten dem body-tag den entsprechenden Gradient CSS-Wert. Dann sollte der Verlauf eigentlich über deine gesamte Seite gehen.
Falls es nicht klappt, kannst du mir auch gerne einen Link zu deiner Seite schicken.
Viel Erfolg mit deinem Verlauf :-)
Gruß
Ellen
Hi,
cool das es so was gibt. Dachte das würde per CSS nicht gehen. Wie ich sehe doch. So kann man seine Internetseiten aufwerten.
Super erklärt Ellen
Jetzt bin ich wieder etwas schlauer.
Wenn ich noch was hinzu fügen darf: man kann die Verläufe auch um 45° kippen.
Also von Links oben nach rechts unten.
einfach ein -45deg einfügen
Zum Beispiel so:
background: -moz-repeating-linear-gradient( -45deg, black 0, lightblue 10% );
Hallo :-)
Ich habe gerade heute mein erstes CSS3 laxout gebastelt und bin komplett ohne Grafiken ausgekommen :-)
Ich finde es irre und ich werde es, für meine private Seiten, sicherlich immmer wieder einsetzen.
Internet Exploder Users sind dann selbst schuld.
Klasse Tutorial und ich werde diese Seite sicher abspeichern in meinem CSS3 Ordner in Firefox!
Einen Gruß aus dem verregneten Berlin,
Rob
Hallo Ellen,
auch ich würde gern einen Tipp von Dir erhalten. Ein Farbverlauf als Seitenhintergrund wird bei mir zwar angezeigt. Wenn das Browserfenster aber höher als die Höhe des darin enthaltenen Seiteninhalts ist, wird der Farbverlauf immer nur bis zum Ende des Seiteninhalts angezeigt. Gibt’s da evtl. einen Parameter, dass der Farbverlauf _immer_ das volle Browserfenster ausfüllt?
Viele Grüße + schon mal Danke :-)
Peter
Hallo Ellen,
ich konnte lange nicht herausfinden, warum ein Hintergrund-Farbverlauf nicht über die volle Fensterhöhe geht, wenn der Seiteninhalt das Fenster nicht vollständig ausfüllt. Darum hatte ich Dir heute geschrieben.
Und dann kam es so wie bei der Waschmaschine, die plötzlich wieder funktioniert, wenn der Monteur daneben steht…
Heute Abend fand ich die Lösung: Ich brauche nur folgende Zeile im CSS-Script hinzuzufügen:
background-attachment: fixed;
Ich dachte immer, das braucht man nur bei Hintergrund-Bildern, aber es funktioniert! :-)
Herzliche Grüße + weiterhin viel Erfolg mit Deiner gut gemachten Seite!
Peter
Hallo Ellen,
ein hilfreicher Artikel.. Danke!
Hier noch ein paar hilfreiche Dinge zum Thema:
Generator für Verläufe (mit IE-Fallback): http://www.colorzilla.com/gradient-editor/
Übersicht der Browserunterstützung der visuellen CSS3-Features: http://www.normansblog.de/demos/browser-support-checklist-css3/
Liebe Grüße,
David
Hallo Ellen,
Sehr schöne Beispiele!!
Toll wäre außerdem eine Beispielwebseite in die diese eingebunden sind.
Wenn ich das Firefox Beispiel verwende und die Styles dem body zuweise, dann wiederholt sich der Farbverlauf die ganze Zeit.
Hier der Code:
body{
background: -moz-linear-gradient(top, #00CCCC, #00FF99);
}
hallo Welt!
Vielen Dank im vorraus!
Hab gerade noch mal Peters Eintrag gelesen. Nachdem
background-attachment: fixed;
eingefügt wird, klappts auch bei mir!
Nun wiederholt sich der Farbverlauf nicht mehr!