(zuletzt bearbeitet )

Habe soeben unter designmadeingermany.de/2011/2629 einen tollen CSS-Effekt gefunden.
Da ich allerdings spontan keine Erklärung dazu fand, habe ich für euch schnell ein Tutorial geschrieben. 😉

Achtung: -webkit-transition und -moz-transition gehören nicht zum CSS-Standard, von Browser zu Browser funktioniert der Code unterschiedlich oder auch nicht!

Im Safari und Chrome (danke Leonard) funktioniert er scheinbar super, im Firefox stimmen die Sekunden-Angaben nicht. Opera ignoriert es (danke success4you), mobile Browser größtenteils ebenso. Was macht der IE?

Zuerst der CSS-Code:

  1. div#scharf {
  2. 	color: transparent;
  3. 	text-shadow: 0 0 5px rgba(0,0,0,0.5);
  4. 	-webkit-transition: text-shadow 1s; /* Einstellung der Dauer fuer Safari und ähnliche Browser */
  5. 	-moz-transition: text-shadow 1s; /* Einstellung der Dauer fuer Firefox und ähnliche Browser */
  6. }
  7.  
  8. div#scharf:hover {
  9. 	color: transparent; /* optional */
  10. 	text-shadow: 0 0 0 rgba(0,0,0,1);
  11. 	-webkit-transition: text-shadow 2s;  /* Einstellung der Dauer fuer Safari und ähnliche Browser */
  12. 	-moz-transition: text-shadow 2s; /* Einstellung der Dauer fuer Firefox und ähnliche Browser */
  13. }

Werbung

Werbeblocker aktiv?

Vermutlich aufgrund eines Werbeblockers kann an dieser Stelle leider keine Werbung angezeigt werden. Als Blog ist diese Website jedoch darauf angewiesen, um diverse Kosten abdecken zu können.

Vielleicht möchtest du Servaholics ja in deinem Werbeblocker als Ausnahme hinzufügen und so unterstützen? Das wäre jedenfalls sehr nett! :-)

Folgender Text ist ein Beispiel für die Anwendung:

Dieser Text wird scharf, sobald du ihn mit deiner Maus überfährst. Dieser Vorgang dauert 2 Sekunden.
Entfernst du deine Maus wieder vom Text, so dauert es 1 Sekunde, bis der Text wieder unscharf ist.

Achtung! Nicht wundern: Der Text ist laut Code (color: transparent;) die ganze Zeit transparent. Erklärung folgt weiter unten 😉

Anfangs (div#scharf {) erhält der Text einen Schatten (text-shadow), der 0 Pixel von links und 0 Pixel von oben beginnt und einen Radius von 5 Pixel um die Buchstaben hat (0 0 5px).
Als Farbe wird gewissermaßen schwarz verwendet, allerdings halbtransparent (rgba(0,0,0,0.5)).
Schwarz entspricht im RGB-System (rgba) 0,0,0.
Der Wert Alpha (rgba) kann zwischen 0 und 1 liegen und beschreibt, wie transparent ein Text sein soll - 0 bedeutet hier vollständig, 1 gar nicht.
Es wirkt so, als stünde der Text da (dieser ist ja in Wirklichkeit transparent: color: transparent;), jedoch sieht man nur den Schatten, und diesen auch noch durch die Halbtransparenz unscharf.

Beim Überfahren des Textes (div#scharf:hover {) wird der Radius des Schattens auf 0 Pixel gestellt und die Transparenz auf 1 (1 = 100% Anzeigekraft -> 0% Transparenz) (text-shadow: 0 0 0 rgba(0,0,0,1);).
Immernoch sieht man den Text nicht, dieser ist weiterhin transparent, jedoch befindet sich der Rahmen der Buchstaben aufgrund seines Radius von 0 Pixel genau an der Stellt, an der die Buchstaben theoretisch stehen würden.
Doch natürlich könnte man die Text-Transparenz beim Überfahren auch weglassen, macht keinen Unterschied. 😉

Mehr zu text-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

Andere Beiträge, die auf diesen Beitrag verlinken

6 Kommentare zu "CSS: Text-Unschärfe mit text-shadow" (RSS)

18. Februar 2011 10:39 UhrAntworten#
Schade im Opera funktioniert es nicht. Ciao.
18. Februar 2011 19:29 UhrAntworten#
Netter Effekt, findet aber jemand eine Verwendung dafür (bin gerade am Bearbeiten einer Seite, vielleicht kann man es ja verwenden)?
Gruß
18. Februar 2011 21:36 UhrAntworten#
Jan
Hallo,

im Chrome Browser von Google funktionierts in Version 9 und 10 (beta) problemlos.

lg
19. Februar 2011 08:57 UhrAntworten#
Das ist auch selbstverständlich..
-moz- sind mozillaspezifische CSS-Codes und -webkit- eben webkitspezifische.

Firefox ist von Mozilla und Chrome und Safari nutzen webkit.
Dass Opera dies ignoriert ist also klar, ist weder Mozilla noch ein webkit Browser. Genauso sollte es sich im IE verhalten - tut es auch.

Operas kürzel für eigene CSS Interpretationen ist ja -o-.
Ein Artikel dazu wäre: http://www.opera.com/docs/specs/presto23/css/transitions/
Wenn ich das jedoch richtig sehe in der Tablle unten, wird für transitions text-shadow nicht unterstützt.
14. April 2011 11:24 UhrAntworten#
Holger
Bei Opera sollte man aktuelle Doku angucken. Presto 2.3 ist immerhin schon 1,5 Jahre alt.

http://www.opera.com/docs/specs/presto28/css/transitions/
auch im aktuellen opera ist jedoch shadow leider noch nicht implementiert.
15. April 2011 12:08 UhrAntworten#
Also auf meinem Handy (HTC Desire) sieht man den Text unscharf. Wenn ich darauf tippe (hover) wird er scharf, aber dann transparent. Wenn ich dann woanders hin tippe, erscheints wieder und wird unscharf 😁

Lg
Palm

Jetzt bist du dran: Was denkst du?

Bitte beachte: Auch wenn das Angeben einer E-Mail-Adresse optional ist, so bist du doch nicht vollständig anonym, denn u.a. deine IP-Adresse wird mit dem Absenden dieses Formulars gespeichert.



Tastenkürzel


Überall

j: Älterer Artikel

k: Neuerer Artikel

s: Suchen

h: Hilfe


Auf Artikel-Seiten

t: Auf Twitter posten

f: Auf Facebook posten

g: Auf Google+ posten