Pattern

Unter einem Pattern (deutsch: Muster) versteht man im Webdesign eine Grafik, die sich auf einer Fläche entlang der X- und der X- Achse wiederholen kann, ohne dass die Schnittkanten zwischen den Einzelgrafiken sichtbar werden. Ist keine Wiederholung sichtbar, spricht man von einem sog. “Seamless Pattern” (deutsch: Nahtloses Muster). Leider findet man auf vielen Websites strukturähnliche Pattern, die zwar keine direkten Bruch an der Kante zeigen, aufgrund auffälliger Strukturen jedoch zu häufige Wiederholungen aufweisen. Auch ein solches Muster ist unprofessionell, obwohl es technisch fehlerfrei umgesetzt wurde. Bei “echten” Mustern, mit starkem grafischen Charakter besteht dieses Problem i.d.R. nicht.

Grafiken mit Data URIs (Base 64) erzeugen

Veröffentlicht am 4. März 2013 und aktualisiert am 19. März 2013 • 6 Kommentare • Themen: CSS, HTML, Pattern, Performance

Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.

Beitrag zu Ende lesen

Zick-Zack-Linien mit CSS3

Veröffentlicht am 30. Oktober 2012 • 6 Kommentare • Themen: CSS, Pattern

Es gehört zu den Standard-Disziplinen eines Webdesigners den Übergang zwischen verschiedenen Seitenbereichen attraktiv zu gestalten. Ein häufig gesehenes Stil-Element ist dabei die Zick-Zack-Linie, die insbesondere im Retro-Look und in Verbindung mit Ribbons gerne eingesetzt wird. Normalerweise wird dafür ein grafisches Pattern gestaltet und horizontal gekachelt, doch es geht auch mit CSS3.

Beitrag zu Ende lesen

Subtle Patterns

Veröffentlicht am 11. Mai 2011 • 4 Kommentare • Themen: Pattern

Leichte Hintergrundtexturen, Muster oder Körnungen können die grafische Qualität einer Website spürbar verbessern. Es macht einen Unterschied ob ein Hintergrund einfach nur weiß ist, oder ob ein dezentes Muster eingesetzt wurde.
Genau an dieser Stelle setzt die Website Subtle Patterns an und zeigt eine Kollektion sehr hochwertiger, dezenter Muster. Alle Pattern können gratis, als Grafik oder Photoshop-Muster, heruntergeladen werden.

Beitrag zu Ende lesen

CSS3-Hintergrundmuster mit CSS3-Gradients erzeugen

Veröffentlicht am 25. April 2011 • 0 Kommentare • Themen: CSS, Pattern, Tools

Lea Verou hat vor einiger Zeit auf Ihrem Blog ein sehr interessantes Experiment vorgestellt: Mit Hilfe von CSS3-Gradients hat sie Hintergrund-Kacheln erzeugt, die anschließend wie eine als Grafik abgespeicherte Kachel eingesetzt werden können.
Der Vorteil liegt auf der Hand: Geringere Dateigrößen und reduzierte HTTP-Requests. Vor ein paar Tagen hat sie dann die CSS3-Pattern-Gallery ins Leben gerufen, auf der Sie die angewandte Technik kurz beschreibt und sehr ansprechende Beispiele präsentiert.

Beitrag zu Ende lesen

Online CSS Pattern Generator: Patternify

Veröffentlicht am 12. April 2011 • 1 Kommentar • Themen: CSS, Pattern, Tools

Wenn Ihr häufig eigene Hintergrund-Muster in Photoshop erstellt, diese anschließend als Grafik exportiert und im CSS-Dokument wieder einbettet, dann schaut euch unbedingt mal folgendes Online-Tool an.
Patternify ist ein Online-Generator zur Herstellung von Hintergrundmustern und erleichtert die Gestaltung und vor allem die Einbindung von CSS Pattern erheblich.

Beitrag zu Ende lesen