Hover-Glüheffekt mit CSS

Moderne Browser beherrschen mittlerweile ziemlich spannende CSS-Funktionen. Mithilfe einiger experimenteller CSS-Elemente hab ich zum Beispiel den Glüheffekt realisiert, der erscheint, wenn man mit der Maus die Artikelüberschrift berührt. Die grafische Spielerei ist eigentlich relativ einfach ohne JavaScript realisierbar, rein mit CSS. Zwingend notwendig dazu sind aber moderne Browser. Derzeit funktioniert der Effekt nur mit Google Chrome und Mozilla Firefox richtig.

Der Schatten

Eigentlich handelt es sich beim Glühen um einen Schatten, der seine Farbe von schwarz nach weiß ändert. Um diesen Schatten hinzubekommen, verwendet man das CSS-Element text-shadow.

#id a:link, #id a:visited {
    text-shadow: 0 0 5px #000;
    }

#id a:hover, #id a:active {
    text-shadow: 0 0 5px #fff;
    }

Gut sieht der Effekt nur bei weißen Texten auf dunklem Hintergrund aus. Alle Links, die sich innerhalb der Klasse #id befinden, erhalten im Normalzustand einen schwarzen Schatten. Fährt man mit der Maus über den Link, wechselt der Schatten seine Farbe nach weiß.

Wer das Ganze ausprobiert, wird merken, dass es noch nicht so aussieht, wie hier, auf dieser Seite. Etwas fehlt: Der weiche Übergang. Der Schatten wechselt abrupt seine Farbe und leuchtet nicht langsam auf.

Weiters sollte hier erwähnt werden, dass der Internet Explorer, auch in der aktuellen Version 9, das CSS-Element text-shadow nicht unterstützt. Er ignoriert es einfach. Alle anderen verbreiteten, aktuellen Browser, haben mit text-shadow keine Probleme.

Der weiche Übergang

Nun kommt der Teil, der derzeit nur den wirklich aktuellsten Browsern vorbehalten bleibt. Mindestvoraussetzung ist ein aktueller Webkit-Browser (Chrome, Safari) oder Firefox ab Version 4. Mit Opera hab ich den Effekt irgendwie nicht hinbekommen, obwohl Opera CSS3 transitions eigentlich unterstützen sollte.

Realisiert wird der weiche Übergang wie bereits angesprochen mit CSS Transitions. Transitions (engl. für Übergänge) sind in den aktuellen Browsern nur experimentell implementiert. Das Element transition wird noch nicht unterstützt. Browser-abhängige Elemente müssen verwendet werden. Das sind für Webkit-Browser beispielsweise -webkit-transition, für Firefox -moz-transition und für Opera -o-transition. Hier ein Stück CSS-Code.

#id a {
    transition: text-shadow 0.3s;
    -webkit-transition: text-shadow 0.3s;
    -moz-transition: text-shadow 0.3s;
    -o-transition: text-shadow 0.3s;
    }

Obwohl nach meinem aktuellen Wissenstand derzeit noch kein Browser das Element transition unterstützt, hab ich es trotzdem eingebaut. Die Browser-abhängigen Elemente sind experimentell und werden aus den Browsern möglicherweise irgendwann entfernt, sobald das „richtige“ bzw. standardisierte CSS-Element transition in den jeweiligen Browser implementiert wurde. Von daher – eine reine Vorsorgemaßnahme.

Mit CSS3 transitions sind übrigens noch jede Menge anderer toller Dinge möglich, hier gibt es ein paar Beispiele dazu.