CSS3: Filter-Effekte: SW/Farbe-Hover Effekt via CSS

Mit CSS lassen sich inzwischen sehr viele Aufgaben sehr einfach lösen. Ein Klassiker ist, Bilder in graustufen bzw. schwarz-weiß und bei Mouse-over (hover) bunt anzeigen zu lassen. Um diesen Anwendungsfall zu lösen, waren früher - also vor CSS3 - zwei Versionen der Bilder und im Zweifelsfall sogar ein recht unangenehmes Gebastel mit JavaScript notwendig.

Spätestens mit dem Aufkommen von Content Management Systemen waren solche grafischen Spielereien ohne Plugins und Improvisation kaum umsetzbar. Dank CSS3 gibt es jedoch eine sehr einfache und komfortable Lösung.

Test: einfach mit der Maus über das unten stehende Bild fahren. Es sollte bunt werden.

Demo: Farbiges Bild via CSS auf s/w reduzieren und via hover wieder farbig einblenden. — Das Bild sollte in Graustufen dargestellt sein, bei Mouse-over in bunt.

CSS-Filter zur Umwandlung in Graustufen

Folgendes habe ich in diesem Beispiel gemacht:

Das Bild via CSS "grau gemacht".
Bei hover den Effekt wieder zurückgenommen.

Folgende Zeilen CSS machen es möglich:

img {
filter: grayscale(100%);
}

img:hover {
filter: grayscale(0%);
}

Durch "filter: greyscale(100%)" wird die Farbe um 100% auf schwarz-weiß reduziert, Bei Mouse-over wird der Effekt wieder aufgehoben. Voilà! Neben der sehr einfachen Umsetzung kommen noch zwei weitere Vorteile zum Tragen: einmal spart sich der Redakteur das Umwandeln des Originalbildes in Graustufen, zum anderen muss dadurch auch nur ein Bild geladen werden. Bei mehreren Bildern kann das ein ordentlicher Einsparungseffekt (Pagespeed!!)sein.

Browserübergreifende Lösung

Leider halten sich bisher noch nicht alles Browser an die konforme Notation, daher macht es aktuell noch Sinn, folgende Zeilen zu ergänzen:

img {
    -webkit-filter: grayscale(100%); /* Chrome, Opera, Safari */
    filter: grayscale(100%);
}

img {
    -webkit-filter: grayscale(0%); /* Chrome, Opera, Safari */
    filter: grayscale(0%);
}

Unschwer zu erraten, welcher Browser mal wieder gar nicht mit spielt: natürlich der Internet Explorer. Microsoft Edge unterstützt "filter" immerhin teilweise.

Neben "greyscale" gibt es noch weitere Filter-Effekte.

Weitere CSS-Filter-Effekte

Die dargestellten Filter-Effekte können wir oben am Beispiel "greyscale" skizziert angewendet werden. Eine Kombination mehrerer Filter ist ebenfalls möglich. Einfach die gewünschten Filter durch Leerzeichen getrennt auflisten.

Ein letzter Filter ist "url()". Damit kann eine XML-Datei referenziert werden, in der SVG-Filter vorhanden sind.

Als Fallback wird logischerweise immer das unveränderte Originalbild angezeigt, so dass im Grunde keine Design-zerstörenden Auswirkungen vorkommen können.

Kommentare (0)

Keine Kommentare vorhanden

Kommentare (0)

Neuen Kommentar schreiben