Ratgeber: "HTML, CSS, Javascript & PHP"

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.

3D-Effekt für Verknüpfungen mit CSS

© Archiv

3D-Effekt für Verknüpfungen mit CSS

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="http://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;

Mehr zum Thema

Mitmachen und gewinnen
Ratgeber: "Webdesign"

Gleiche Rechte für alle - genau das macht auf Websites nicht immer Sinn. Wir zeigen Ihnen, wie Sie mit Joomla Rechte differenziert vergeben können.
Webformulare schützen mit jQuery und PHP
Ratgeber: "HTML, CSS, Javascript & PHP"

Viele Website-Betreiber schützen ihre Formulare vor Spam mit Captchas; Captchas sind jedoch bei den Besuchern unbeliebt. Wer eine stressfreie…
Mobile Webseiten mit jQuery Mobile
Design für Smartphones

Sie wollen Ihrer mobilen Webseite ein individuelles Aussehen geben oder beim Laden der Seite eine Meldung anzeigen lassen? Wir zeigen Ihnen, wie Sie…
image.jpg
Ratgeber: "Bildbearbeitung"

Der Cloud sei Dank entstehen im Netz immer mehr Werkzeuge, die komplexe Rechenprozesse in einfache Interfaces packen. Das gilt auch für die…
Online-Shop mit Opencart erstellen
Ratgeber: "Web-Business"

Neben Magento fristen verschiedene Shopsysteme ein Mauerblümchendasein. Doch zu Unrecht finden Lösungen wie Opencart wenig Beachtung. (Dr. Holger…