Automatisierte Heimeligkeit

Der Mensch sehnt sich merkwürdigerweise immer genau nach dem Gegenteil dessen, was er gerade hat. So entsteht z. B. im staub- und kratzerfreien Digitalzeitalter allenthalben der Wunsch nach mehr analoger Heimelig- bzw. Unvollkommenheit. Musikproduzenten lassen deshalb gerne mal ein Stück mit dem Knistern einer alten Schallplatte anfangen, Designer zerknicken aufwändig ihre Fotos oder versehen ihre Layouts mit Kaffeeflecken – ausschließlich digital natürlich –, Filmemacher trimmen ihre Aufnahmen mit diversen „Film-Look“-Plugins auf alt, und auch im Webdesign haben Gebraucht-Look, Schatten und Spiegelungen seit einiger Zeit permanente Hochkonjunktur.

Auch ich teile gelegentlich jene Sehnsucht, und als ich kürzlich ein Bild mit alten Fotoecken, die ich mühsam dazubasteln musste, in mein Blog geklebt habe, habe ich mich anschließend gefragt, ob man das nicht auch automatisieren könne.

Man kann

Zum Vergleich: Diese Abbildung besteht aus einem Bild und ist komplett in Photoshop entstanden:

Und folgende besteht aus zwei Bildern, die mit Hilfe von CSS übereinandergelegt wurden – einer transparenten PNG24-Datei (fotorahmen.png) im Vordergrund und der eigentlichen Bilddatei (arschbombensynchronspringen.jpg), die per CSS dem img-Background zugewiesen wurde:

Ziehen Sie anschaulichkeitshalber beide Versionen per Drag&Drop auf Ihren Schreibtisch

Sehen Sie einen Unterschied? Nein, in modernen Browsern sehen Sie keinerlei Unterschied zwischen den beiden Versionen, bei der zweiten sparen Sie sich allerdings die zeitraubende Photoshop-Montage.

Und so geht’s

Das eigentliche Bild, arschbombensynchronspringen.jpg, ist 388×258 Pixel groß:

und passt damit genau in den ausgesparten Bereich der Grafik fotorahmen.png:

Hier exemplarisch der img-Tag mit dem benötigten CSS:

<img src="fotorahmen.png" style="width: 420px; height: 294px; background: url('arschbombensynchronspringen.jpg') no-repeat center center;" />

Die in den Cellophan-Fotoecken steckenden Bereiche des Fotos werden durch die Transparenzen des Vordergrund-Bilds genau so angepasst wie bei der 1-Datei-Photoshop-Version.

Hier ein weiteres Beispiel, das schön die Behandlung der Ecken zeigt:

Kompatibilität

IE < 7-Benutzer, deren Browser PNG-Transparenzen von Haus aus bekanntlich nicht darstellen können, sehen oben bei der zweiten Version bzw. beim obigen Bild irgendwas – ich habe mir nicht die Mühe gemacht, nachzusehen. Sicherlich kann man einen der allseits bekannten Hacks integrieren, damit das auch mit IE6 funktioniert – ich habe aber darauf verzichtet, weil ich persönlich diese Geschichte eher als Machbarkeitsnachweis betrachte.

Meistens fallen meine Bilder nämlich auch ohne Klebe-Ecken nicht aus diesem Blog.