Grafische Hintergründe ohne Grafik – pure CSS! Kleines Patternify-Tutorial

Ja, das geht tatsächlich. Grafische Pattern als endloser Hintergrund ohne Grafik nur per CSS. Dazu gibt es ein tolles kostenloses Online-Tool, dass ich heute vorstellen möchte: Auf www.patternify.com gibt es einen Onlinegenerator mit dem ihr Pixel für Pixel eine eigene Grafik für eure Hintergründe erstellen könnt. Hier findet ihr zum einen ein kleines Tutorial zum Bedienen des Patternify-Generators sowie einige Beispielse direkt zum Copy&Paste für eure CSS.

Patternify-Tutorial

Klickt direkt auf www.patternify.com – an sich ist der Editor relativ selbsterklärend. Hier ein Screenshot mit einer kleinen Legende dazu:

1. Größe der Grafik festlegen Die maximale Größe sind 10 Pixel – das ist zugegebenermaßen nicht viel, aber man kann dennoch eine Menge damit anstellen.
2. Die Fläche an sich – einfach klicken und malen Jedes Feld entspricht einem Pixel. Achtung: sobald ihr mit dem Cursor auf ein bemaltes Feld klickt, wirkt das wie ein Radierer.
3. Farbwähler Ihr könnte auch den Farbwert direkt in das Feld schreiben.
4. Deckkraft  Oft verwende ich eine Deckkraft von nur 0,1 – das ergibt dann wunderbar halbtransparente Muster, die ich über eine beliebige Farbfläche einsetzen kann.
5. Werkzeugleiste 4 Werkzeuge: Undo, Stift, Radierer und Farbwähler. Die Undo-Taste geht recht weit zurück – ich habe noch nicht mitgezählt, wieviele Schritte 🙂
6. Beispielmuster Zugegeben – das sind nicht viele – aber für den Einstieg hilft es, mal ein fertiges Muter zu nehmen und damit zu arbeiten
7. Mülleimer Eine von mir sehr oft genutzte Funktion: der Klick auf den Mülleimer löscht die komplette Fläche
8. Preview Die Vorschau als Fläche – Live und in Echtzeit
9. Der CSS Code zum Copy&Paste Das Kopieren ist am Anfang etwas gewähnungesbedürftig, weil der Rahmen und der Wert nicht gleichzeitig kopiert werden können – aber wenn man öfters das Pattern ändern möchte ist das gar nicht mal so unpraktisch.
10. Get Pattern URL Extrem praktisch – per Klick generiert Patternify einen Link, über den ihr jederzeit direkt zu eurer Pattern-Kreation im Patternify-Editor zurückkehren könnt um diese zu ändern. Diese Permalinks habe ich auch zu jedem Beispiel mit angefügt. Achtung: diese LInks werden per Klick auf den Button generiert und nicht wie die Vorschau in Echtzeit mitgeändert.

Beispiele von www.patternify.com direkt zum Copy&Paste

Wir fangen hier mal mit halbtransparenten Hintergründen an – diese lassen sich perfekt über farbige Boxen legen. Jeden Hintergrund habe ich über verschiedene farbige Flächen gelegt. Unter der Vorschau seht ihr jeweils die CSS-Angabe sowie den direkten Link zu Patternify mit diesem Muster.

Pattern mit dünner diagonaler Linie, halbtransparent dunkel

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAJ0lEQVQIW2NkwA4kGbGISwLFnqNLgAVBipEl4ILIEiiCMAkMQZAEADf0BSAVgBNTAAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1LqmBvN

Pattern mit breiter diagonaler Linie, halbtransparent weiß

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAARUlEQVQYV2NkwAL+//8viS7MiC6AVREj43MUhbgUgQyDK8SnCK6QkCKwQmIUYVXICHQ4Ng+imIhLEYqJ+BTBFRJSBFIIAHkYM3lVDbsDAAAAAElFTkSuQmCC);

Link zu Patternify: http://ptrn.it/1GZTqju

Mit diesem Generator könnt ihr schnell flache einfarbige Flächen in edle Hintergründe verwandeln. Noch ein kleiner Tipp zum Schluss: Auch wenn dies eine Lösung ohne JPG, Gif oder PNG ist – dieses Element wird identisch zu einem realen Bild verwendet. Ihr könnt als nicht diesen Hintergrund innerhalb einer Ebene über ein anderes Hintergrundbild legen, sondern müsst in diesem Fall zwei Div-Container ineinander verschachteln.

Ciao,

Mirjam

Für alle, die doch einen Hintergrund mit einer größeren Fläche suchen…. Hier eine Auswahl direkt von Shutterstock:

[shutterstock images=12 showkeywords=1 tooltips=1 logo=1 keywords=“seamless Background“  paging=1 header=1 order=random ]

Tags: CSS, Grafik, Hintergründe, Tutorial

Das könnte dich auch interessieren: