Die Textfarbe transparent machen, aber einen Schatten hinzufügen
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}Unscharf
Mehr Browser unterstützen Farbe als Textschatten, daher möchten Sie vielleicht Feature Detection durchführen. Oder lassen Sie die Farbeigenschaft weg und fügen Sie genügend Schatten hinzu, damit es trotzdem unscharf aussieht (Demo).
Netter Effekt.
Farbe: transparent funktioniert gut in Gecko und Webkit, aber es verbirgt den Text und den Textschatten in Opera.
Verwenden Sie color: rgba(0, 0, 0, 0) für bessere Cross-Browser-Kompatibilität.
Ach du liebe Zeit. Das ist wirklich genial. Ich kann nicht glauben, dass mir das so viele Jahre entgangen ist.
Kombinieren Sie dies mit JavaScript und Sie können eine ganze Website mit Pseudo-Tiefenschärfe-Effekten erstellen.
Danke für die Inspiration.
Sind diese Textarten suchmaschinenfreundlich.....?
@edward; Ja, das sind sie. Der Text ist immer noch da, ganz normal. Der einzige Unterschied ist, dass die Farbe transparent ist und ein unscharfer Schatten darauf angewendet wird. Suchmaschinen haben kein Problem damit, ihn zu lesen.
gut gemacht
Hallo Chris
schöner Effekt
sehr sehr schöner Trick…. :-)
Lol, einfach und effektiv :)
Funktioniert nicht in <IE9
IE muss sterben
Genialer Code :)
Schön
Das scheint in IE10 nicht zu funktionieren, der Text erscheint komplett transparent. Als Workaround habe ich Folgendes verwendet:
color: #cbcbcb;
text-shadow: 0 0 5px rgba(0,0,0,1);
Nicht perfekt, aber nah dran.
Hat bei mir super funktioniert. Ich benutze es mit WebKit auf iOS- und Android-Geräten.
Danke! :)
text-shadow: 1px 1px 4px black, -1px -1px 4px black;
font-size: 3em;
macht den Text ausreichend unscharf.
fiddle
Oder eine farbige Variante…
color: black;
text-shadow
2px 2px 4px #900,
-2px -2px 2px #009,
– 2px 2px #090,
2px -2px 2px #ff0;
Post
funktioniert nicht in IE-Browsern. Haben wir dafür Optionen? :)
Gibt es eine Möglichkeit, Text langsam zu entblauen? Der Text beginnt unscharf und kommt dann in den Fokus?
Entschuldigung, dass dies ein wenig spät kommt, Tim, aber das sollte tun, was Sie wollten.
fiddle
Sicherlich wäre es besser, einfach CSS-Filter zu verwenden, wie so?
CSS-Filter werden kaum unterstützt
Für heute ist die Unterstützung sehr gut und dies ist der einzige Weg, um unscharfe Bilder oder andere HTML-Tags als Text zu erstellen.
Netter Trick :)