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.

Subtle Patterns Photoshop-Plugin

subtle-pattern-photoshop-plugin

Die Website Subtle Patterns bietet zahlreiche Endlosmuster für die Gestaltung von Website-Hintergründen zum Download an. Die Seite ist den meisten Webdesignern wohl bereits bekannt. Das Entwickler-Team von CSS Hat und Enigma64 hat nun zusammen mit Atlo Mo, dem Gründer von Subtle Patterns, ein weiteres Photoshop-Plugin erstellt. Das Subtle Patterns Photoshop Plugin integriert die Bibliothek der Subtle Pattern-Website als Bedienfeld in Photoshop. Ich hatte die Möglichkeit mir das Plugin bereits vor der Veröffentlichung einmal anzuschauen und freue mich euch sogar zwei Lizenzen zur Verfügung stellen zu können.

Beitrag zu Ende lesen

Grafiken mit Data URIs (Base 64) erzeugen

base64-code

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

zickzack-css

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

subtle-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

css3-pattern-gallery

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

css-pattern-patternify-logo

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