(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? 🙂

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

Deine Meinung zu diesem Artikel?


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

Schade im Opera funktioniert es nicht. Ciao.
Netter Effekt, findet aber jemand eine Verwendung dafür (bin gerade am Bearbeiten einer Seite, vielleicht kann man es ja verwenden)?
Gruß
Hallo,

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

lg
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.
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