Ratgeber: "HTML, CSS, Javascript & PHP"

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

24.5.2012 von Anna Kobylinska und Filipe Pereira Martins

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.

ca. 0:35 Min
Ratgeber
3D-Effekt für Verknüpfungen mit CSS
3D-Effekt für Verknüpfungen mit CSS
© Archiv

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

Mitmachen und gewinnen

Ratgeber: "Webdesign"

Rechte verwalten mit Joomla 2.5

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"

Webformulare schützen mit jQuery und 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

Seitengestaltung und Event-Steuerung mit jQuery Mobile

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"

10 Online-Tools zur Bildbearbeitung im Test

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"

Online-Shop mit Opencart erstellen

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