Vielleicht möchten Sie eine kleine Bildsammlung oder eine Reihe von Zeitschriften als virtuellen Fächer darbieten? Geht ganz einfach.
In unserem Beispiel rechts stellen wir drei Ausgaben eines Magazins als Fächer dar.
- Wir versehen die unterste Ausgabe mit einem Schatten. So sieht es eher nach einem mehrseitigen Magazin aus. Zuoberst erscheint die neueste Ausgabe – zwei ältere liegen darunter.
- Weil der Stapel ja auch in Papierform etwas dicker wäre und einen Schatten würfe, haben wir dies auch im Beispiel berücksichtigt.
- Und damit das ganze mehr zufällig aufgetürmt ausschaut, lassen wir den Stapel rechts ein wenig aus dem normalen Content herauslugen.
Der HTML-Code zu nebenstehendem Beispiel sieht folgendermassen aus. Fügen Sie ihn im HTML-Editor Ihres CMS ein:
© Casafair Schweiz
<div style="position: absolute; top: 5px; left: 0px; z-index: 3;">
<a href="https://casafair.ch/angebot/magazin-casanostra/">
<img style="border-style: solid; border-color: #474747; border-width: 1px 3px 3px 1px; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); margin-top: 30px; margin-left: 15px;" src="https://domainiac.ch/wp-content/uploads/casanostra-152-september-2019-212x300.png" alt="" width="212" height="300" />
</a>
</div>
<div style="position: absolute; top: 5px; left: 0px; z-index: 2;">
<img style="border-style: solid; border-color: #474747; border-width: 1px 3px 3px 1px; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); margin-top: 20px; margin-left: 15px;" src="https://domainiac.ch/wp-content/uploads/casanostra-151-juni-2019-212x300.png" width="212" height="300" />
</div>
<div style="position: absolute; top: 5px; left: 0px; z-index: 1;">
<img style="border-style: solid; border-color: #474747; border-width: 1px 3px 3px 1px; box-shadow: 10px 20px 30px grey; -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -o-transform: rotate(12deg); -ms-transform: rotate(12deg); transform: rotate(12deg); margin-top: 10px; margin-left: 15px;" src="https://domainiac.ch/wp-content/uploads/casanostra-150-april-2019-212x300.png" width="212" height="300" />
</div>Wir erklären nicht ganz alles bis ins Detail – Sie werden pröbeln wollen; soviel aber gleichwohl:
- Jede Ausgabe liegt in einem <div>-Tag. Die <div>-Tags dieses Beispiels sind alle einheitlich gestylt. Unterschiede gibt es nur bei der Anweisung z-index: 3, z-index: 2 und z-index: 1 am Ende der Zeilen 1, 6 und 9. Dieser z-index legt fest, wo der <div> zu liegen kommt. Die 1 ist zuunterst, die 3 liegt oben auf.
- Die oberste Ausgabe wird mit einem Link versehen, damit auch was passiert, wenn man draufklickt. Wer keinen Link will, lässt den <a>-Tag einfach weg.
- Im <img>-Tag spielen Sie nach Lust und Laune. Wir versehen alle Ausgaben mit einem feinen Rand links und oben und einem etwas breiteren rechts und unten, womit ein dreidimensionaler Look entsteht. Dann folgen die rotate-Anweisungen, die bestimmen, um wieviel Grad die Ausgabe gedreht wird. Verwenden Sie bei allen rotate-Anweisungen ein und derselben Ausgabe die gleichen Werte – variieren Sie die Werte aber unter den drei unterschiedlichen <img>-Tags. Wenn Sie in allen <img>-Tags dieselben rotate-Werte angeben würden, entstünde der Fächer-Look nicht: alle Ausgaben würden im selben Winkel dargestellt und dadurch von der jeweils darüberliegenden verdeckt.
- Auch mit den margin-Anweisungen sollten Sie ein wenig spielen, bis Ihnen das Ergebnis gefällt.
- Sie sehen auch, dass das Beispiel auf Bilder aus unserer Mediathek zurückgreift. Verwenden Sie an deren statt einfach Ihre eigenen.
- Im letzten <img>-Tag haben wir noch einen box-shadow eingefügt, welcher den Schatten des Stapels zeigt.
- Wenn dereinst neue Bilder angezeigt werden sollen, dann verschieben Sie die Bild-URLs einfach von oben nach unten an die richtigen Positionen und fügen im so frei werdenden obersten <img>-Tag die neue Illustrations-URL ein.
Vielleicht eine Spielerei; punktuell eingesetzt, ist es womöglich aber eine willkommene gestalterische Abwechslung. Freilich könnten Sie die style-Anweisungen des Beispiels auch im CSS-Stylesheet unterbringen. Wir benötigen in unserem Fall den Fächer aber nur an einer einzigen Stelle, weswegen wir uns das gespart haben und stattdessen inline stylen.
