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:
div#scharf {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-transition: text-shadow 1s; /* Einstellung der Dauer fuer Safari und ähnliche Browser */
-moz-transition: text-shadow 1s; /* Einstellung der Dauer fuer Firefox und ähnliche Browser */
}div#scharf:hover {
color: transparent; /* optional */
text-shadow: 0 0 0 rgba(0,0,0,1);
-webkit-transition: text-shadow 2s; /* Einstellung der Dauer fuer Safari und ähnliche Browser */
-moz-transition: text-shadow 2s; /* Einstellung der Dauer fuer Firefox und ähnliche Browser */
}
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