CSS3 background linear-gradient, Linearer Farbverlauf

Das Thema „lineare Farbverläufe“ soll heute nocheinmal kurz aufgegriffen werden. Am Wochenende hatte ich mir ja schon einige Seiten zu diesem Thema, wie ja z.B. den CSS Gradient Generator von ColorZilla, angeschaut, von einigen anderen werde ich sicher noch berichten. Richtig beeindruckt, im Sinne, was technisch möglich ist, hat mich aber Lea Verou und ihre Seite mit Beispielen zu CSS3 Mustern (engl.: patterns). WOW! Nicht, das ich alle Muster gleich als Hintergrund für eine Webseite nutzen wollte, aber … genial, was geht!

In ihrem Beitrag auf 24ways.org css3 patterns explained beschreibt sie detaillierter die Funktionsweise von linearen Farbverläufen.

Hier sind meine ersten Übungsbeispiele, als ich dem Beitrag entsprechend gefolgt bin. Auf jeden Fall macht das Spass und weckt den „Spieltrieb“.

Für CSS3 Übungen macht es sicherlich grundsätzlich Sinn, sich z. B. prefix-free (da wir ja gerde bei Lea Verou sind …) zu laden und einzubinden. Das hält den CSS Code schlank und wesentlich übersichtlicher. Solch ein Script lädt zur Laufzeit, also beim Laden der Webseite, die für den gerade benutzten Browser (unter Umständen) benötigten prefix-Eigenschaften (-moz-, -webkit-, -o-). Darüber, ob man solch ein Script im Echtbetrieb einer Webseite nutzen sollte, streiten sich die Gemüter derweil. Ich habe das prefix-free-script hier an dieser Stelle nur für diesen einen Beitrag eingebunden.

Trotzdem, es klappte bei mir nicht alles auf Anhieb, erstaunlicher Weise zickte mein firefox (18.0.2) etwas rum.

Viel Spass beim Experimentieren!