Die Welt ist gar nicht so. » 3d http://blog.dieweltistgarnichtso.net Sie ist ganz anders. Mon, 23 Sep 2013 15:41:20 +0000 de-DE hourly 1 https://wordpress.org/?v=4.0.35 3D-Anaglyph-Text mit CSS http://blog.dieweltistgarnichtso.net/3d-anaglyph-text-mit-css http://blog.dieweltistgarnichtso.net/3d-anaglyph-text-mit-css#comments Thu, 07 Oct 2010 15:14:33 +0000 http://blog.dieweltistgarnichtso.net/?p=3017 Weiterlesen →]]> 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) …

Fefes Blog

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.

]]> http://blog.dieweltistgarnichtso.net/3d-anaglyph-text-mit-css/feed 1