CSS Filter (-webkit-)

Die CSS Filter Eigenschaften kommen aus dem Bereich Bildbearbeitung und funktionieren ähnlich wie Photoshop-Filter. Durch diese Filter-Eigenschaften werden neue,  interessante optische Effekte und kunstvolle Textgestaltung möglich, was manche Grafik erspart. 
Die Eigenschaften für Filter sind noch in Entwicklung.

CSS Filter für HTML-Elemente

body Filter für die gesamte Seite (alle Child-Elemente erben diesen Effekt)
button Filter für Schaltflächen
div Filter betrifft den gesamten Bereich (alle Child-Elemente erben diesen Effekt)
img Filter für die referenzierte Grafik
input Filter für das Eingabefeld
marquee Filter für den Lauftext
span Filter betrifft den gesamten Bereich (alle Child-Elemente erben diesen Effekt)
table, td, Filter für die Tabelle, Datenzellen
textarea Filter für das mehrzeilige Eingabefelder
thead, tfoot Filter für den Kopf- und den Fussbereich einer Tabelle
th, tr Filter für die Kopfzelle oder für Tabellenzeilen

Filter Funktionen

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url()
  Die url() Function nimmt die Location von einem XML File welches einen SVG Filter spezifiziert.

Browser Syntax

Webkit Browser brauchen zur Zeit noch einen Prefix. IE 11 stellt CSS-Filter problemlos dar.
Bei Firefox hilft z.Z. auch kein Prefix.
Weitere Details bei Can I use.

.blur { 
-webkit-filter: blur(7px);
filter: blur(7px);
}

Blur

Werte von 1 bis 10 sind möglich

 

img.blur { filter: blur(7px);}

Brightness

Werte von 0.1 bis 10 sind möglich

 

img.bright { filter: brightness(3);}

Contrast

Werte von 0.1 bis 10 sind möglich

 

img.contrast { filter: contrast(1.9);}

Drop-Shadow

Drop-Shadow hat die selben Werte wie Box-Shadow.

 

img.drop-shadow { filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));}

Vergleiche mit Box-Shadow

Box-Shadow wird bereits ab IE 9 umgesetzt.

 

img.box-shadow {box-shadow: 0px 0px 10px rgba(0,0,0,.5)}

Grayscale

Werte von 0.1 bis 1 sind möglich

 

img.gray { filter: grayscale(1);}

Hue-Rotate

Werte von 0 bis 360 Grad sind möglich

 

img.hue { filter: hue-rotate(90deg);}

Invert

Werte von 0.1 bis 1 sind möglich

 

img.invert { filter: invert(0.7);}

Opacity

Werte von 0.1 bis 1 sind möglich

 

img.opacity { filter: opacity(0.5);}

Saturate

Werte von 0.1 bis 10 sind möglich

 

img.saturate { filter: saturate(5.5);}

Sepia

Werte von 0.1 bis 1 sind möglich

 

img.sepia { filter: sepia(0.5);}

Filter kombinieren

Mehrere Filter können gleichzeitig angewendet werden.

 

img.multis { filter: grayscale(0.6) hue-rotate(210deg);}

Die Reihenfolge spielt eine Rolle

Vorsicht bei SEPIA, wird die Reihenfolge umgedreht entsteht ein neuer Effekt.

 

img.multi { filter: saturate(6.7) sepia(0.8);}

 

img.multi2 { filter: sepia(0.8) saturate(6.7);}

Filter Tools & Linktips

- Filter Generator 
- CSS Filter Demo 
- Delicious-Linkliste