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

patternify_header

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:

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.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem n├Ąchsten Newsletter for free


  • Die 1 Cent pro Klick Formel
  • 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)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed