3D-Anaglyph-Text mit CSS
Bemüht man die Suchmaschine seiner Wahl, erhält man bisher exakt einen auf den ersten Blick brauchbaren Artikel zur Themenkombination „Anaglyph-Effekte und CSS“ (Demo). Die dort vorgestellte Methode ist allerdings aus mehreren Gründen unbrauchbar:
- Der zu dekorierende Text wird mittels generiertem Inhalt in einem Pseudo-Element dupliziert. Einfacher und semantisch sauberer wäre die Verwendung des CSS3-Attributes text-shadow.
- Die Glyphen sind nicht nur horizontal, sondern auch vertikal gegeneinander versetzt — man müsste den Kopf also stets schräg halten, um den gewünschten Effekt zu erzielen.
- Die verwendeten Farben sind Rot und Blau. Für Anaglyphendarstellungen werden heutzutage aber Rot und Cyan verwendet.
Nachdem fish mir eine Anaglyphenbrille überließ, habe ich mich heute morgen daran gemacht, ein eigenes stylesheet ohne diese Missstände zu erstellen. Umgesetzt habe ich das Ganze natürlich für unseren Lieblings-CSS-Sandkasten (screenshot) …
Um den 3D-Effekt zu verstärken, wird der :hover-Status mittels CSS Transitions animiert; in aktuellen WebKit- und Gecko-Browsern (Chrome, Safari, Firefox ab Version 4.0) sollten diese problemlos funktionieren. Der Quellcode findet sich auf GitHub.
Ich will auch so eine Brille ;_;