Ein CSS3-3-D-Effekt, zwei Herangehensweisen
Kommentare

Mit CSS3 kann man Elemente aufwendig stylen, das ist bekannt. Interessant ist aber, wie viele Varianten des Stylings es gibt, die am Ende doch relativ vergleichbare Ergebnisse erzielen – zumindest auf

Mit CSS3 kann man Elemente aufwendig stylen, das ist bekannt. Interessant ist aber, wie viele Varianten des Stylings es gibt, die am Ende doch relativ vergleichbare Ergebnisse erzielen – zumindest auf den ersten Blick. Denn mit nur verhätlnismäßig wenigen Abwandlungen kann man ganz neue Features hinzufügen, den Effekt verändern und die Responsivität steigern.

Im konkreten Fall schauen wir uns ein Image bzw. Thumbnail an, das per Hover als dreidimensionaler Quader dargestellt und umgelegt wird und einen Schatten wirft.

Wie aus einem Guss, aber doch völlig unterschiedlich umgesetzt Screenshots: http://thecodeplayer.com/walkthrough/3d-thumbnail-image-hover-effect, http://demosthenes.info/blog/830/CSS-3D-Captioned-Domino-Image

CodePlayer hat, um diesen Effekt zu realisieren, ein Pseduo-Element mit dem Hintergrundbild des Thumbnails benutzt, das senkrecht positioniert wird, um den 3-D-Box-Effekt zu bewirken. Ein zweites Pseudo-Element beinhaltet einen durchsichtigen Hintergrund und einen Box-Schatten, der erscheint, wenn der Quader sichtbar wird. Den vollständigen Code könnt ihr euch hier anschauen.

Dudley Storey hingegen findet, CodePlayers Umsetzung hinkt an einigen Stellen: Die Bilder seien auf diese Art nicht mobile-ready, das CSS sei unnötig komplex, etc. Also wollte er es besser machen. Ob es ihm gelungen ist, könnt ihr euch hier ansehen.

Aufmacherbild: Composite silver cube with some colorful elements von Shutterstock / Urheberrecht:3DStyle

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -