5202

ein Blog über technische Fragen zu Blogger

Links mit 'Unschärfe' maskieren

von
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.
.hover {
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
    color: rgba(0, 0, 0, 0);
    opacity: 0.5;
}
Funktioniert in allen modernen Browsern und im IE ab 9+.

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!