Trick # 525 | Dieser Beitrag beinhaltet 744 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Bilder müssen nicht immer einfach nur so gerade dastehen. Ein kleiner Dreh kann ansprechend wirken. Dabei ist es nicht einmal nötig, das Originalbild im Photoprogramm zu bearbeiten. Ein wenig CSS-Code hilft Ihnen.
Ein passendes Sujet zum heutigen Datum; aber doch recht unspektakulär – eigentlich.
© Birgit Winter/pixelio.de
Um dem gewünschten Bild den 3D-Effekt beizubringen, vergeben Sie ihm eine CSS-Klasse. «image-3d» nennen wir sie in unserem Beispiel. Falls Sie das Divi-Theme verwenden, tragen Sie die CSS-Klasse einfach im Bildmodul, im Tab «Erweitert», unter «CSS-ID und Klassen», im Textfeld «CSS-Klasse» ein.
Nun folgt noch der CSS-Block, den Sie dem CSS-Stylesheet Ihrer Website hinzufügen müssen. Falls Ihre Website mit WordPress läuft: dann unter Design/Customizer/Zusätzliches CSS:
.image-3d {
transform:
perspective(800px)
rotateY(-35deg)
translateY(-40px)
rotateX(10deg)
scale(1);
box-shadow: 1rem 1rem 2rem rgba(0,0,0,0.5);
}Der obige CSS-Code stellt nun das Bild so dar wie nebenan:
Mit den Werten lässt sich natürlich nach Lust und Laune spielen …
Frohes neues Jahr – derweil!
© Birgit Winter/pixelio.de
Werbung
Werbung
