CSS3 Patterns – gekachelte Hintergrunde noch einfacher

Dieser Beitrag wurde vor mehr als 12 Jahren veröffentlicht. Daher kann es sein, dass sein Inhalt oder ein Teil davon nicht mehr aktuell ist.

Naja ok, einfach ist jetzt an diesem Punkt relativ. Aber Einfacher als die Variante von vor gut 2 Jahren. Damals stellte ich bgpatterns vor, welches sich allerdings über die zwei Jahre auch nicht großartig weiterentwickelt hat. Klar, das Design wurde überarbeitet, vom Funktionsumfang her bleibt es gleich. Anders hingegen CSS3 Patterns, wie der Name bereits sagt, handelt es sich hier nicht um eingefügte Bilder, sondern um Muster, welche mit CSS3 erstellt werden. Klingt langweilig? Abwarten, denn mit CSS3 ist mehr möglich als man meist erwarten würde.

Wie man auf dem einleitenden Screenshot bereits sieht, sind hier nicht irgendwelche Striche gemeint, die den Hintergrund verzieren sollen, sondern tatsächlich richtige Muster und auch Symbole. Als ich die »Ying und Yang«-Zeichen gesehen habe, war ich sogar wirklich beeindruckt. Weiter unten finden sich übrigens tatsächlich solch langweilige Dinge wie Striche ;) Aber eben vollkommen ohne Grafiken.

Das Interessante ist übrigens, dass es in der CSS3 Patterns Gallery keine einzige Grafik gibt. Alles ist mit CSS gestalten, vom Texteffekt im Header, über die Patterns bis hin zum kleinen Schnipsel der Sprechblase gibt es keine Grafik auf der Seite. Finde ich persönlich recht beeindruckend. Ich habe mich bei dieser Aussage übrigens darauf verlassen, was mir Programme sagen und es wird nirgends ein Bild mitgeschnitten/heruntergeladen, also gehe ich davon aus, dass das stimmt.

Vergleich der 4 großen Browser

Dementsprechend unterschiedlich sieht die Website allerdings auch in den verschiedenen Browsern aus. Allerdings nicht schlecht. Es gibt in keinem Browser Fehldarstellungen, wenn er es nicht kann, lässt er es einfach. So wie es sich gehört. Für Webdesigner also recht erfrischend, da man es einsetzen kann ohne, dass irgendwer Probleme hat. Der, der einen älteren Browser nutzt, bekommt einfach die Hintergrundfarbe.

Warum Opera allerdings nur einen Teil darstellen kann, wundert mich allerdings ein bisschen. Opera kenne ich bisher eigentlich immer als Browser, welcher Standards doch immer recht frühzeitig einbaut, um so mehr freut es mich, dass Deutschlands am meisten verbreiteter Browser und ehemaliger Lieblingsbrowser – Firefox – damit sauber umgehen kann. Bei Chrome überrascht es mich nicht und war zu erwarten.

Ich finde die Idee auf jeden Fall ziemlich genial, naheliegend aber dennoch genial. Ich hoffe, dass diese Seite stark mit Content gefüllt wird, damit wir Webdesigner irgendwann auf ein riesiges Repertoir an BG-Patterns zurückgreifen können. Denn der Vorteil liegt hier klar auf der Hand. Es ist mit Copy-Paste getan, man muss keine Grafiken herunterladen, muss sie nicht einbinden und muss sie nicht verknüpfen. Und ein Nachteil ist in meinen Augen nicht gegeben.

CSS3 Patterns Gallery

2 Kommentare

  1. "Es gibt in keinem Browser Fehldarstellungen, wenn er es nicht kann, lässt er es einfach."
    Doch, da sind Fehldarstellungen – schau mal beim Ying Yang im FF4 ;-)

    Stimme aber zu, die Idee an sich ist genial. Ich wünschte, CSS3 würde endlich mal endgültig als Standard gesetzt. ich zögere zu häufig, es zu verwenden.