CSS-Filter ermöglichen es mit einfachen CSS Deklarationen zahlreiche Effekte auf HTML-Elemente und Bilder anzuwenden. Zudem sind sie in den meisten modernen Browsern verfügbar.
Die Effekte
Momentan gibt es unter anderem: Helligkeit, Kontrast, Graustufen, Invertieren, Transparenz, Sättigung, Verschwimmen oder Farb-Looks wie Sepia. Grau ist alle Theorie, also probiert die Effekte am besten auf dieser oder dieser Demo-Page aus.
Anwendung
.ele {
filter: blur(10px) contrast(2);
-webkit-filter: blur(10px) contrast(2);
}Bei diesem Beispiel wird ein Element (Bild oder HTML) zunächst verschwommen gemacht und dann im Kontrast gesteigert.
Wichtig ist das bei der Verwendung von mehr als einem Filter, die Reihenfolge in welcher man die Filter anwendet. Da ein zweiter Filter immer das Ergebnis des vorherigen als Grundlage nutzt. Außerdem sind noch Vendor-Prefixe wie -webikit, -moz usw. nötig um die Kompatibilität zu gewährleisten.
Möglichkeiten
Da Browser die keine CSS-Filter können diese ignorieren, eigenen sie sich vorzüglich für grafische Goodies deren Abwesenheit Benutzbarkeit und dem Informationsgehalt einer Website nicht beeinträchtigen. Es lassen sich so zahlreiche Farbvarianten von Grafiken erzeugen ohne das dafür separate Bilddateien angelegt werden müssen. Wie alle CSS-Deklarationen sind auch Filter-Effekte mit Transitions animierbar. In der Prototyping Phase eines Webdesign-Entwurfes kann man die Farben ganzer Seiten drehen u.v.m.
Ich wünsche viel Spass beim ausdenken und ausprobieren eigener Ideen! :)