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: patternify

  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


Da weiß auf weißem Hintergrund nicht sichtbar ist, seht ihr im Patternify Generator hier nur weiße Felder….)

Klicke hier und werde Mitglied im Style-Club der Ideenlounge und du bekommst alle Grafiken, Codeschnipsel und das Ideenlounge-Style-Plugin zum Download. Alles komplett for free!

Ab dem 01.07.2015 exklusiv für alle Style-Club-Mitglieder: 25 schicke grafische Hintergründe ohne Grafik mit CSS-Code zum Copy&Paste!

Die Anmeldung ist unverbindlich und kostenlos und kann jederzeit wiederrufen werden.


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 ]

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

Das könnte dich auch interessieren:



  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich über die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufhübschen könnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmäßig per Mail.
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    Nützliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, Hintergründe, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder stoße ich auf interessante Blogs, Webseiten oder Bücher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    Nützliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz