20. Juli 2011 · 5 Kommentare · Kategorien: Internet · Tags:

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.

Anzeige

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.

Anzeige


5 Kommentare

  1. cooler Effekt. Ich habe mich schon gefragt, wie du das gemacht hast.
    Danke für die Erklärung.

  2. Echt cooler Effekt, mir war bis jetzt nur der Schatten bekannt, aber das mit der 0,3 Sekunden Verzögrung ist ein echt cooler Effekt. =)

    Ich würde mich über mehr CSS 3 Beiträge freuen. ^^

  3. Danke euch beiden für das Lob, hört man natürlich gerne. Neue CSS-Funktionen sind in Zukunft sicher ein spannendes Thema. Ich werde dazu sicher den ein oder anderen Artikel schreiben. Heute wurde beispielsweise ein Artikel zu CSS-Farbverläufen veröffentlicht.

  4. WERTER VALENTIN; ÜBER EINE GOOGLE-ANFRAGE: „FACEBOOK-BENACHRICHTIGUNGEN ENTFERNEN“ BIN ICH AUF PICOMOL GELANDET. EINE SEHR INTERESSANTE SEITE FÜR DEN DER SICH MIT DER MATERIE PC AUSKENNT. FÜR MICH, IM ZARTEN ALTER VON 62, EIN INPUT-OVERKILL.
    ICH BENEIDE SIE UM IHRE JUGEND UND DIE VIELE ZEIT DIE IHNEN NOCH BLEIBT UM WISSEN ANZUHÄUFEN UND DIESES WISSEN AUCH WEITER ZU GEBEN.

    IHNEN ALLES GUTE UND DIE RESONANZ DIE SIE VERDIENT HABEN1

    PETER WEITZ

  5. Hallo Peter. Vielen Dank für deinen Kommentar. Sowas hört man natürlich sehr gerne und es ermuntert, auch in Zukunft am Ball zu bleiben.

    Nochmal dankeschön und viel Spaß auf der Seite!

    Gruß Valentin

  6. Pingback: JavaScript, Animationen und CSS3 | picomol.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.