CSS3 Image Filter Effekte

Inhaltsverzeichnis

CSS3 macht es möglich

CSS3 ist wirklich klasse, denn die Möglichkeiten, ohne viel Aufwand wunderschöne Effekte zu erstellen, waren niemals größer. Früher brauchte es für einen Blur Effekt gleich Flash oder Javascript, heute wird das einfach mit CSS3 umgesetzt. Nötig sind dafür nur moderne Browser, die meisten unterstützen die Tags allerdings schon oder planen dies in einer der nächsten Versionen. Gerade die CSS3 Image Filter Effekte haben es mir angetan, denn einige sind wirklich hübsch und werten Websites auch deutlich auf, zumindest wenn sie richtig eingesetzt werden. Wer also viel mit Bildern arbeitet, oder einfach einen netten Hover-Effekt für die Thumbnails und Post-Images sucht, der wird bei CSS3 ganz sicher fündig. Hier die fünf schönsten CSS3 Image Filter Effekte.

Die 5 besten CSS3 Image Filter Effekte

Schwarz-weiß CSS3 Filter

Schwarz-weiß CSS3 Filter

filter: grayscale(1);
 -webkit-filter: grayscale(1);
 -moz-filter: grayscale(1);
 -o-filter: grayscale(1);
 -ms-filter: grayscale(1);

Blur Verwischen CSS3 Filter

Blur/Verwischen CSS3 Filter

filter: blur(1px);
 -webkit-filter: blur(1px);
 -moz-filter: blur(1px);
 -o-filter: blur(1px);
 -ms-filter: blur(1px);

Sättigung CSS3 Filter

Sättigung CSS3 Filter

filter: saturate(250%);
 -webkit-filter: saturate(250%);
 -moz-filter: saturate(250%);
 -o-filter: saturate(250%);
 -ms-filter: saturate(250%);

Sepia CSS3 Filter

Sepia CSS3 Filter

filter: sepia(1);
 -webkit-filter: sepia(1);
 -moz-filter: sepia(1);
 -o-filter: sepia(1);
 -ms-filter: sepia(1);

Invertieren CSS3 Filter

Invertieren CSS3 Filter

filter: invert(1);
 -webkit-filter: invert(1);
 -moz-filter: invert(1);
 -o-filter: invert(1);
 -ms-filter: invert(1);

Hübsche CSS3 Image Effekte

Die Snipptes oben müsst ihr einfach nur in eure Style.css Datei kopieren und zwar genau in den Div-Container, der den Effekt darstellen soll. Am schönsten sind die CSS3 Image Filter für Image Hover Effekte, allerdings kann selbiges auch umgedreht werden. Zum Beispiel so, dass das normale Bild den CSS3 Filter Schwarz-weiß bekommt und beim img:hover dieser dann entfernt wird, das Bild beim Mouse-Over also wieder farbig dargestellt wird. Vieles ist möglich mit den Filtern, denn sie fallen einfach stark auf und wirken sehr modern und schick. Ich hoffe ich konnte dem ein oder anderen helfen, viel Spaß mit den CSS3 Image Filter Effekten. Denkt aber daran: Nur ein dezenter Einsatz ist schön, zu viel dagegen ist meist hässlich.

Christian Pust
WordPress & Onlinemarketing Experte mit über 15 Jahren Erfahrung. Entwickler & CEO von Trackboxx – der Google Analytics Alternative.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Das könnte dich auch interessieren

Du benötigst Unterstützung bei deinem WordPress Projekt?

Dein Ansprechpartner
Christian