Teil von CSS 3 sind sogenannte Gradients. Dies sind Farbverläufe, die nur via CSS Angabe erzeugt werden und nicht etwa eine Bilddatei benötigen. Der Vorteil liegt auf der Hand: Es muss keine komplizierte Hintergrundkonstruktion ersonnen werden um schöne Effekte zu zaubern.
Hier sieht man das ganze mal in Aktion. Das einzige Bild, ist der Hintergrund mit dem abgebildeten Gebäude. Der grüne Schleier, der schräg verläuft und dann transpartent wird und der Farbverlauf hinter dem Suchformular wurden nur durch CSS Gradients erzeugt. Was man auch sehr gut sieht: Gradients vertragen sich mit der border-radius Eigenschaft sehr gut.
Von Colorzilla gibt es einen Excelenten CSS 3 Gradients generator! Damit lassen sich für alle Browser, die CSS 3 Gradients unterstützen selbige erstellen. Aber sogar dem Internet Explorer kann in den Versionen vor 9 über einen entsprechenden Proprietären Filter nachgeholfen werden. Für ältere Opera, Webkit und Mozilla Browser wird der Support mittels Präfix hergestellt.
Einfach ein Template auswählen und dann geht es ans Anpassen: Einfach für die jeweiligen Punkte die Transparenz bzw. den Farbwert einstellen und die Orientierung wie der Farbverlauf ist für den gesamten Gradient einstellen und dann einfach den Code aus dem CSS Fenster kopieren. Fertig ist der ein CSS Gradient, der sich auf einer Vielzahl von Browsern darstellen lässt.
