Bilder im Polaroidstil per CSS generieren
CSS3 Polaroid

Artikelübersicht

Hier wird erklärt, wie man mit Hilfe von CSS3 den Stil eines Polaroidfotos ohne Bildbearbeitung bzw. Photoshop generiert und Fotos für eine Galerieansicht (fast) zufällig anordnen kann. Funktioniert ohne Javascript und jQuery und bestimmt nicht im Internetexplorer < 11.

Der im folgenden Text genannte Name Polaroid steht ausschließlich im Zusammenhang mit dem Aussehen von Bildern der ehemaligen Sofortbildkameras, deren Erscheinungsbild hier per CSS, für die Darstellung mit Internet, simuliert werden soll. Polaroid ist zum Zeitpunkt der Erstellung dieses Artikels Wortmarke bzw. Warenzeichen von PLR IP Holdings LLC.

Dirk Trute am Freitag 10. März 2017.
Letzte Änderung: Montag 25. März 2019.

Lange Einleitung

Zum einen hatte ich bei einer "Auftragsarbeit" das Problem aufeinanderfolgende Bilder in unterschiedlichen Winkeln zu drehen, um die Bildfolge etwas aufzulockern. Es sollte der Effekt einer zufälligen Verteilung simuliert werden. Zum andern bin ich überall im Internet auf vorgetäuschte Polaroidbilder gestoßen. Mal per Photoshop, mal per CSS generiert und auch als Kombination von beidem zu finden. Nur echte gescannte Sofortbilder sind eher selten anzutreffen. Nach dem ich den Gedanken selbst eine Polaroidsimulation per CSS zu basteln ein paar Monate vor mich hin trug, war der Auslöser zur Umsetzung der Idee, dass ich jemanden mit so einem Instantdrucker, also einer Digitalkamera mit eingebautem Drucker, gesehen habe.

Außerdem mag ich hin und wieder Retrosachen. Erst sind Dinge überholt, wenn sie vom Markt und aus dem Blickfeld verschwunden sind, erfolgt irgendwann später das Comeback. Wenn alle mit einer Smartwatch herumlaufen und diese Ihre Urinwerte mit Ihrem Arbeitgeber und dem Amt für Datenschutz und Internetzufriedenheit teilt, da Sie das "Zustimmem-Häckchen" setzen müssten um die Uhrzeit abzulesen, wird es wieder so ein Comeback geben. Das ist jedoch ein anderes Thema.

Mit Polaroidbildern kam ich nur ein einziges Mal in meiner Kindheit in Berührung. Unsere Bekannten hatten Besuch aus Amerika (USA) und dieser hatte so einen seltsamen Kasten, der eher wie eine Schreibmaschine in Kleinformat, als ein Fotoapparat aussah. Dieses Ding spukte ein kleines Papier aus, auf dem nach Herumwedeln und Pusten wie durch Zauberei ein Bild entstand. In Farbe! In seltsamen Farben noch dazu. Ich kannte nur die meist gestochen scharfen aber schwarz-weißen Fotos meiner Eltern. Jedenfalls war dies ein Erlebnis, das ich bis heute in Erinnerung behalten habe.

Im Gegensatz zur digitalen Fotografie entstand von einer Auslösung nur ein einziges Unikat und nichts das beliebig reproduzierbar ist, ähm... "geteilt" werden kann. Im Gegensatz zum damals üblichen Weg, dass Abzüge im Labor hergestellt wurden, was einige Zeit in Anspruch nahm, konnte man nach kurzer Zeit (sofort) ein echtes Bild in den Händen halten.

Ich möchte mich aber hier mit einem Polaroid per CSS begnügen. Ich habe von Null angefangen ohne nachzusehen wie andere dies bewerkstelligt haben und bin dabei über diverse CSS-Fallstricke gestolpert. Fallen in der Form, dass dieses nur dann geht, wenn jenes fest angegeben ist usw. Außerdem ist dies hier nur eine Wochenendbastelei und stammt nicht von einem CSS-Profi, der alles per Javascript oder durch ein monströses Framework umsetzen würde.

Meine Aufgabenstellung war eine kleine Bildergalerie ausschließlich per CSS zu schreiben, in der die Fotos das Aussehen von Polaroidbildern nachahmen, die Bilder sich scheinbar zufällig anordnen und alles halbwegs responsiv (im Sinne des Responsive Webdesign) ist.

Die CSS-Eigenschaften werden im ersten Teil auf eine Liste mit anklickbaren Bildern angewendet, im zweiten Teil mit ein paar kleinen Vereinfachungen auf Figure und das Figcaption Element.

Für unterschiedliche Bildgrößen muss nur die Gesamtbreite des Elements angegeben und die Höhe des Beschriftungsfeldes berechnet werden. Das alles von allein und ausschließlich mit relativen Werten funktioniert habe ich leider nicht umsetzen können. Dafür gibt es eine Exceltabelle im Downloadarchiv, die alle benötigten Angaben ausrechnen kann.

Bildformat und Proportionen

Richtig interessant sieht es nur aus, wenn die Proportionen, also die Größen im Verhältnis zueinander eingehalten werden. Deshalb wollte ich heraus bekommen, welche Abmessungen ein original Polaroidbild hat, um daraus die Größenverhältnisse auszurechnen. Da ich selbst keins habe musste ich das Internet konsultieren und kam zu diesem Ergebnis:

Das Papier hat damit ein Seitenverhältnis von 1 zu 1,22 und das Bild logischerweise von 1 zu 1. Der entstehende einfache Rand und das eigentliche Bild ist dann 4,5mm breit bzw. 5,11% der Breite. Die Beschriftungsfläche ist dann (abzüglich beider Ränder) 107mm - 4,5mm - 79mm - 4,5mm = 19mm bzw. 22% im Verhältnis zur Bildbreite hoch. Diese Angaben benötigt man um später im CSS die Größenverhälnisse richtig zu bestimmen und in Pixel bzw. Prozentwerten anzugeben. Um die Sache etwas zu vereinfachen, gibt es zur Ermittlung der Werte eine Exceltabelle. Leider weiß ich nicht ob oder wie man mit CSS-Calc Verhältnisse berechnen kann. Deshalb muss die Breite des Bildes und die Höhe der Textbox angegeben werden.

Polaroidstil für Listenelemente per CSS

In diesem Abschnitt wird das CSS auf eine List mit anklickbaren Bildern angewendet. Die Klasse wird nur dem UL-Element zugewiesen. Alle anderen Elemente werden als Nachfahre von UL selektiert und erhalten so ihre Eigenschaften ohne das für diese weitere Klassen vergeben werden müssen. In der folgenden Grafik kann man die Schachtelung der Elemente am Beispiel von 2 Bildern sehen, die Listenelemente sind und jeweils innerhalb eines Links <a> liegen.

ul.polaroid {
    max-width: 100%;
    margin: 2em auto;
}
ul.polaroid li {
    list-style: none;
    max-width: 250px;
    display: inline-block;
    background-color: white;
    background: linear-gradient(110deg, white, oldlace);
    box-shadow: 4px 4px 15px gray;
    vertical-align: top;
    margin: 20px;
}
ul.polaroid a {
    text-decoration: none;
}
ul.polaroid img {
    max-width: 90%;
    height: auto;
    margin: 5% 5% 0 5%;
}
ul.polaroid span {
    display: inline-block;
    width: 90%;
    min-height: 54px;
    margin: 0 5% 5% 5%;
    text-align: center;
}

Hier die Erklärung zu den einzelnen Elementen und Werten aus dem Beispiel-CSS:

ul.polaroid {max-width: 100%; margin: 2em auto;}

Hier legen Sie maximale Gesamtbreite der Liste fest. Bei 100 % wird der gesamte mögliche Platz eingenommen, dies entspricht dem Standardwert. Der Vertikale Außenabstand zum Nachbarelement beträgt im Beispiel 2em bezogen auf die Schriftgröße. Mit dem Wert "Auto" wird die Liste horizontal im Elternelement zentriert.

ul.polaroid li {...}

Hier die Eigenschaften für das eigentliche Listenelement:

• list-style: none = unterdrückt den Listenpunkt
• max-width: 250px = hier wird die maximale Breite eines Bildes einschließlich Rahmen angegeben.
• display: inline-block = Formatiert das Listenelement zum Inline-Block-Element um. Dem Element kann nun Breite und Höhe zugewiesen werden. Es erfolgt jedoch kein automatischer Umbruch nach dem Element (da inline).
• background-color: white = Legt die Hintergrundfarbe des Bildes fest. Der Punkt dient als Fallback wenn linear-gradient im nächsten Punkt nicht unterstützt wird.
• background: linear-gradient(110deg, white, oldlace) = Ein einfacher Farbverlauf soll ein leicht vergilbtes Papier simulieren. Farbe 1 nach Farbe 2, im Winkel von 110°.
• box-shadow: 4px 4px 15px gray = Hier wird der Schatten erzeugt, der das weiße Objekt vom weißem Hintergrund abhebt. Versatz in X-Richtung, Versatz in Y-Richtung, Blur-Wert und Schattenfarbe.
• vertical-align: top = Richtet alle Elemente und den Text vertikal oben aus. Dies ist wichtig wenn an unterschiedlich Lage Bildtexte schreiben möchte.
• margin: 20px = Legt den Abstand der LI-Elemente untereinander fest. In der Version mit den gedrehten Bildern auf "0" ändern.

ul.polaroid a {text-decoration: none;}

Unterdrückt die automatische Unterstreichung des Links (wenn man möchte).

ul.polaroid img {...}

• max-width: 90% = legt die Breite des eigentlichen Bildes fest. 90% das der Rand 2 x 5% entspricht. Die benötigten Bildabmessungen können mit der Exceltabelle im Download berechnet werden.
• height: auto = passt die Höhe des Bildes automatisch an.
• margin: 5% 5% 0 5% = über den Außenabstand wird auf drei Seiten um das Bild ein Rand generiert. Dies erschien mir günstiger als die Verwendung von Border. So kann der Hintergrund auch den Rahmen ausfüllen.
  
  Um einen inneren Schatten (inset) um das Bild zu generiere, der beim Original vorhanden ist, müsste man das Bild in ein zusätzliches Objekt packen. Sonst liegt ein über "box-shadow: inset" erzeugter Schatten unter dem Bild (fand ich echt geistreich).

ul.polaroid span {...}

Text unter dem Bild, der optional ist, habe ich in einen "Span-Tag" gesteckt um ihn separat selektieren zu können. Profis wäre sicherlich etwas Besseres eingefallen (z.B. ein DIV).

• display: inline-block = Das Span-Element ohne besondere Eigenschaften wird ein Inline-Block-Element gewandelt um Breite und Höhe festlegen zu können.
• width: 90% = Die Breite entspricht der des Bildes.
• min-height: 54px = Die Höhe hier im Beispiel entspricht dem Seitenverhältnis des Originalbildes. Die Höhe kann, für andere Breiten, mit der Excel-Tabelle bestimmt werden.
• margin: 0 5% 5% 5% = Hier wird wieder ein äußerer Rand generiert, der mit dem Hintergrund gefüllt werden kann.
• text-align: center = Der Text wird in X-Richtung zentriert. Wenn er auch vertikal zentriert werden soll wird es komplizierter. Dies ginge z.B. über "display: table-cell". Ist der Text länger als der Umgebende Kasten, wird dieser automatisch nach unten hin vergrößert. Wer dies nicht möchte kann mit "overflow:hidden" eine Höhenänderung der Box verhindern.

Polaroidrahmen für das Figure-Element

Wenn man eine semantisch bessere Lösung sucht und nur ein oder zwei Bilder beschreiben möchte, bietet sich die Übertragung der Eigenschaften auf Figure und Figcaption an. Worum es sich dabei handelt, finden Sie z.B. beim MDN erklärt.

figure.polaroid {
    background: white;
    background: linear-gradient(110deg, white, oldlace);
    box-shadow: 4px 4px 15px gray;
    max-width: 250px;
    vertical-align: top;
}
figure.polaroid img {
    max-width: 90%;
    height: auto;
    margin: 5% 5% 0 5%;
}
figure.polaroid figcaption {
    width: 90%;
    min-height: 52px;
    margin: 0 5% 5% 5%;
    text-align: center;
}

Und hier der Link zur Beispieldatei mit dem Polaroid-Rahmen für <figure> und <figcaption>

Animationen, Zoom- und Dreheffekt mit CSS

Damit die Bilder nicht langweilig aussehen und etwas Interaktion vorgetäuscht wird, habe ich ein paar CSS-Effekte hinzugefügt. Die Bilder in einem Winkel zu drehen lockert die Ansicht ein bisschen auf. Fährt man mit der Maus über ein Bild, wird dieses gerade gedreht, vergrößert und in den Vordergrund gehoben. Ist man arm dran und hat keine Maus, passiert leider nichts dergleichen.

Dem <li>- bzw <figure>-Element werden folgende Eigenschaften hinzugefügt. Um eine Aktion beim Zeigen auf das Objekt austzulösen, wird eine neue Pseudoklasse li:hover geschaffen und mit zusätzlichen Eigenschaften versehen.

ul.polaroid li {
  position: relative;
  transform: rotate(4deg);
  transition: all ease 0.6s;
}

ul.polaroid li:hover {
  transform: scale(1.1) rotate(0deg);
  z-index: 999;
}

position: relative;

Siehe Z-Index.

transform: rotate(Winkel deg);

Durch eine Transformation wird ein Übergang von einem Zustand in einen anderen bewirkt. In diesem Fall in Form einer Rotation. Der Angegebene positive Winkel in Dezimalgrad (deg) bewirkt eine Drehung bzw. Schrägstellung der Bilder gegenüber der Ausgangslage. Der Rotationsmittelpunkt liegt (soweit ich weiß) in der Objektmitte.

transition: all ease 0.6s;

Damit die Animationseffekte nicht wie ein- und ausgeschaltet aussehen, bewirkt Transition einen Übergang von einem Zustand in den Anderen über die Zeit. Es lassen sich so sanfte, ansprechende Übergänge erzielen. Man darf sich mit den Übergängen jedoch nicht zu viel Zeit lassen.

• all = (transition-property) Gibt an welche Eigenschaft bzw. Animation verändert werden soll. "All" für alle Effekte
• ease = (transition-timing-function) Gibt an wie in Form einer Kurve der Übergang stattfindet. "Ease" ist der Standardwert, mit langsamen Start, dann schneller und dann zum Ende hin wieder langsamer.
• 0,6s = (transition-duration) Ist die Dauer des Übergangs in Sekunden.

Diese gilt gleichzeitig für den Hin- und Rückweg.

:hover

Die Pseudoklasse wird verwendet, um einen Mouseover-Effekt beim selektierten Objekt auszulösen. Das heißt, die Animationen werden gestartet, wenn sich der Mauspfeil darüber befindet. Bei einer Touchbedienug hat man nichts davon.

transform: scale(1.4) rotate(0deg);

Scale führ zu einer Skalierung bzw. Größenänderung den angegebenen Faktor einsprechend. Wird nur ein Wert angegeben, erfolgt eine gleichmäßige Skalierung in der X- und Y-Dimension. Gleichzeitig wird das Bild zurück in die Waagrechte gedreht (0deg).

z-index: 999;

Mittels Z-Index lässt sich die Reihenfolge eines Objekts innerhalb der Schichtung der Elemente übereinander ändern. Per Z-Index, z.B. 999, wird das Element, beim Hover-Ereignis nach oben in den Vordergrund gehoben. Dem Standard nach muss für Z-Index auch "Position" angegeben werden. Mit position: relative habe ich das Element unverfänglich an sich selbst ausgerichtet.

Festgelegte Eigenschaften für einige Elemente

Wenn alle Bilder im gleichen Winkel ausgerichtet werden, stellt sich ein gleichmäßiges und etwas langweiliges Aussehen ein. Dies lässt sich mit einer unterschiedlichen Ausrichtung der Bilder ändern.

Wenn nur eine bestimmte geringe Anzahl von Bildern mit unterschiedlichen Eigenschaften versehen werden kann, bietet sich als Selektor die Pseudoklasse nth-child bzw. :nth-child() an. Mit diesem Selektor wird das benannte so und sovielte Kind angesprochen. Das war jetzt eine vereinfachte Aussage zur Funktion des Selektors. So eine richtig gute Beschreibung habe ich dazu nicht gefunden. Auch nicht in meinen CSS-Büchern. Eine kurze englischsprachige Erklärung findet man z.B. bei W3Schools.

ul.polaroid li:nth-child(1) {transform: rotate(8deg);}
ul.polaroid li:nth-child(2) {transform: rotate(-8deg);}
ul.polaroid li:nth-child(3) {transform: rotate(5deg);}
ul.polaroid li:nth-child(4) {transform: rotate(-5deg);}

Hier die Beispielansicht dazu:

Vorgetäuschter Zufall mit nth-child(Xn) und Primzahlen für viele Objekte

Für eine größere oder eine ungewisse Anzahl an Objekten ist die Vergabe von Festen Werten unpraktisch. Deshalb bin ich auf die Idee gekommen, Eigenschaften über :nth-child(Xn) zu vergeben. Es wird jeweils das so und sovielte Kind selektiert. Das "X" steht für eine arithmetische Zahlenfolge mit ganzzahligen Koeffizienten (also eine Zahl ohne Komma). nth-child(2n) selektiert jedes 2., 4., 6. Kind, nth-child(3n) jedes 3., 6., 9., Kind usw. Die Verwendung eignet sich sehr gut für regelmäßige Wiederholungen, z. B. für farbige Tabellenzeilen aber weniger für mein Projekt. Also muss irgendwie ein bisschen Zufall ins Spiel gebracht werden.

Mir ist leider keine Möglichkeit bekannt wie man allein mit CSS Zufallswerte generieren kann. Wie ich feststellen musste ging es anderen auch nicht viel besser. Es gab jedoch vom einen oder anderen Profientwickler Vorschläge Primzahlen zur Vortäuschung des Zufalls zu verwenden. Also z.B. jedes 2., 3., 5.,7. und 11. Element bzw. Kind anzusprechen.

Da man Farben besser als schiefe Winkel erkennen kann, habe ich hier 100 Listenelementen im Raster von 10 mal 10 angeordnet und über nth-child(Xn) unterschiedliche Hintergrundfarben zugewiesen.

li:nth-child(2n) {...} 
li:nth-child(3n) {...}
li:nth-child(5n) {...}
li:nth-child(7n) {...}
li:nth-child(11n) {...}

Hier eine Beispieldatei dazu: Beispiel 1 mit nth-child und Primzahlen
Die Seite öffnet in einem neuen Fenster oder Tab. Die Wirkung kann man sehr gut sehen wenn man die Fenstergröße verändert.

Größere Variation durch eine verschobenes Intervall

Durch das Hinzufügen einer größeren Variationsbreite an Möglichkeiten lässt sich der Abstand zwischen den Wiederholungen vergrößern. Es werden sozusagen weitere Schichten hinzugefügt und ein Muster wird schwerer erkennbar. Diese Schichten werden durch eine Verschiebung des Intervalls und Überlagerungen hergestellt. Es wird der Startpunkt der Zählung verschoben, das Intervall bleibt dabei unverändert.

So wird bei z.B. bei nth-child(5n+3) das der Start auf das 3. Element verschoben und ab dort im Intervall von 5 weitergezählt. Also wird Kindelement 3, 8, 13, 18, 23 usw. selektiert. Beispiel zu nth-child(5n+3)

li:nth-child(2n+1) {...}
li:nth-child(3n+2) {...}
li:nth-child(5n+3) {...}
li:nth-child(7n+5) {...}
li:nth-child(11n+7) {...}

Nach etwas experimentieren fand ich diese Variante am besten: Beispiel 2 mit nth-child und verschobenem Intervall

li:nth-child(2n) {...}
li:nth-child(2n+1) {...}
li:nth-child(3n) {...}
li:nth-child(3n+1) {...}
li:nth-child(7n+1) {...}

Das soll nun keine auch Patentlösung sein. Aber mit ein bisschen experimentieren stellt sich sicherlich der gewünschte Effekt ein. Natürlich müssen wieder unterschiedliche Displaygrößen bzw. Viewportbreiten berücksichtigt werden um den gewünschten Effekt beizubehalten.

Nun zu Abschluss noch ein Beispiel mit meinem Polaroid-Rahmen für 20 Bilder.

Weiterführende Links

Anregungen und hilfreiche Informationen fand ich auf diesen Seiten:

• The Cicada Principle and Why It Matters to Web Designers - Alex Walker
• Das Zikaden-Prinzip – The Cicada Principle und warum es Webdesigner etwas angeht. Übersetzung des obigen Artikels - Marc Haunschild
• Magic randomisation with nth-child and Cicada Principle - Charlotte Jackson

Download der Beispieldateien

Beispieldateien zu meinem CSS-Polaroid können Sie hier als Zip-Archiv herunterladen. In der Datei sind mehrere Beispiele und die oben beschriebene Exceltabelle enthalten Sie dürfen die Dateien aus dem Zip-Archiv für jede Art von Projekt verwenden. Für die anderen Inhalte dieser Seite gelten jeweils andere Nutzungsbedingungen.

Download
Download Zip-Archiv, Größe 46 KB.

Browserunterstützung, Performance

Browserunterstützung

Ja es gibt sie! Alte Browser auf Smartphones, bei DAU's, auf Desktops in Ämtern und Behörden auch, deshalb muss man prüfen, was unterstützt wird und was nicht, wenn man ein bestimmtes Ziel erreichen muss.

Der Rahmen selbst stellt kein Problem dar, da er nur mit Padding, Höhe und Breite erzeugt wird. Effekte, die durch CSS3-Funktionen erzeugt wurden, funktionieren z.B. im Internetexplorer erst ab Version 10. Mit aktuellen Browsern werden die Funktionen unterstützt (bis auf Opera-Mini).

Um die Frage nach der Browserunterstützung zu beantworten, ist die Seite " Can I use" eine der besten Quellen.

Performance

Die Sache verbraucht nur wenige Ressourcen und läuft auch auf dem nicht ganz so neuen Smartphone flüssig. Die Bilder stammen vom Test mit Mozilla Firefox und einer Testdatei mit 36 Bild links ohne zusätzliches CSS und rechts mit. Es werden nur einige Megabyte mehr verwendet.

Feedback, Kommentare

Wenn Sie Fragen haben oder einen Kommentar los werden möchten, schreiben Sie mir bitte eine E-Mail oder nutzen Sie das Kontaktformular.

Wenn mir das, was Sie geschrieben haben gefällt, werde ich es hier einfügen. E-Mail-Adressen werden nicht veröffentlicht.

Datenschutzerklärung.