3D-Effekt für Verknüpfungen mit CSS
Wer den Verknüpfungen auf seiner Website einen unvergesslichen und doch dezenten Effekt verleihen möchte, hat es inzwischen nicht mehr gerade einfach. Wir zeigen Ihnen wie Sie einfach einen eindruckvollen 3D-Effekt zu Ihren Links hinzufügen.
Es scheint, als sei das letzte Wort in Sachen spannender :hover-Effekte längst gesprochen und es ließe sich niemand mehr mit dezent einladenden Verknüpfungen hinter den Ofen hervorlocken.Wer dennoch beim Website-Besucher originelle Eindrücke hinterlassen möchten, kann die :hover-Interaktivität...
Es scheint, als sei das letzte Wort in Sachen spannender :hover-Effekte längst gesprochen und es ließe sich niemand mehr mit dezent einladenden Verknüpfungen hinter den Ofen hervorlocken.Wer dennoch beim Website-Besucher originelle Eindrücke hinterlassen möchten, kann die :hover-Interaktivität in die dritte Dimension bringen.Der Einsatz von Flash ist hierzu keine Voraussetzung. Beim Markup brauchen Sie keine gesonderten Vorkehrungen zu treffen;es dreht sich alles um eine ganz gewöhnliche Syntax einer rein traditionellen Verknüpfung:
<a href="https://www.magnus.de/">Internet Magazin</a>Dass benötigte CSS beinhaltet:
body {
font-family: sans-serif;
background: #333;
color: #eee;
}
a {
text-decoration: none;
color: hsl(206, 80%, 50%);
}
.roll {
display: inline-block;
overflow: hidden;
vertical-align: top;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
}
.roll span {
display: block;
position: relative;
