2.11.12
Links mit 'Unschärfe' maskieren
Eine kleine Spielerei für die Nacht - in der Skizze werden die Links beim hovern 'hervorgehoben', indem der Hintergrund mit 'Unschärfe' maskiert wird!Wie wird's gemacht?
Die Idee dahinter ist denkbar einfach - ich gebe allen Elementen, die nicht 'gehovert' werden, mittels eines Javascripts die Klasse.hover.Der 'unscharfe' Effekt entsteht dann mit der Eigenschaft
text-shadow. Funktioniert in allen modernen Browsern und im IE ab 9+.
.hover {
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
color: rgba(0, 0, 0, 0);
opacity: 0.5;
}
Anmerkungen
Ich wollte ein Text-Elemente hervorheben, indem ich nicht das Element selber, sondern den Hintergrund dazu verändere. Das ist nur ein Experiment und ich habe so was noch nicht in der 'freien Wildbahn' gesehen.Trotzdem - wenn es Fragen oder Anmerkungen gibt, immer her damit!