CSS / CSS Filter 1 2[IE]

Filter: Horizontal
Das Bild wird horizontal gedreht.
 <img src="monkeys.gif" style="filter: flipH()">

Filter: Vertikal
Das Bild wird vertikal gedreht.
 <img src="monkeys.gif" style="filter: flipV()">

Filter: Gray
 <img src="monkeys.gif" style="filter: Gray()">


Filter: Xray
 <img src="monkeys.gif" style="filter: Xray()">


Filter: Invert
 <img src="monkeys.gif" style="filter: Invert()">


Filter: Emboss

 <img src="monkeys.gif"
 style="filter: progid:DXImageTransform.Microsoft.Emboss()">


Filter: Engrave

 <img src="monkeys.gif"
 style="filter: progid:DXImageTransform.Microsoft.Engrave()">


Filter: Pixelate

 <img src="monkeys.gif"
 style="filter: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=3)">
Werte  maxsquare: 1-25


Filter: Wave (Wellen-Effekt)

 <img src="monkeys.gif"
 style="filter: Wave(freq=3, light=35, phase=25, strength=6)">
Werte  freq: 5-50 (Wellenfrequenz); light: 0-100; phase: 0-100; strength: 1-10


Filter: Alpha (Vordergrund und Hintergrund verschmelzen)

 <img src="monkeys.gif"
 style="filter: Alpha(opacity=30, finishopacity=25, style=2)">
Werte  opacity: 0-100; finishopacity: 0-100; style: 0-3


Filter: Blur (Verwisch-Effekt)

 <img src="monkeys.gif"
 style="filter: Blur(direction=30, strength=45)">
Werte  direction: 0, 45, 90, 135, 180, 225, 270, 315 (Ausrichtung); strength: 1-100


Filter: Blur (2; Verwisch-Effekt)

 <img src="monkeys.gif" 
style="filter: progid:DXImageTransform.Microsoft.MotionBlur(direction=30, strength=45)">
Werte  direction: 0, 45, 90, 135, 180, 225, 270, 315 (Ausrichtung); strength: 1-100


Filter: Chroma (Transparenzfarbe)

 <img src="monkeys.gif"
 style="filter: Chroma(color=#000000)">
Mithilfe des Chroma-Filters, ist die schwarze Farbe aus dem Bild entfernt worden 
und wird nun transparent dargestellt. Werte  color:Hexadezimal-Wert


Filter: Glow (Glühender Rand)

 <img src="bild.gif"
 style="filter: Glow(color=#FF0000, strength=5)"> 
Werte  color: Hexadezimal-Wert (#FF00AA); strength: 1-25


Filter: Mask (Transparenzmaske)

 <img src="bild.gif" style="filter: Mask(color=#00FFFF)"> 
Werte  color: Hexadezimal-Wert


Filter: Shadow (Schatten)

 <img src="bild.gif" style="filter: Shadow(color=#FFD700, direction=45)"> 
Bild mit gelben Schatten.
Werte  color: Hexadezimal-Wert; 
direction: 0, 45, 90, 135, 180, 225, 270, 315 (Ausrichtung)


Filter: Dropshadow (Schattenwurf)

 <img src="bild.gif"
 style="filter: DropShadow(color=#A0A0A0, offx=6, offy=-3)"> 
Bild mit grauen Schatten.
Werte  color: Hexadezimal-Wert; offx: 5 |-3 (horizontal *); offy: 5 |-3 (vertikal *)
* Verwendbar sind positive und negative Werte


Die Filter:  Wave, Glow, Shadow und DropShadow sind auch als Text-Effekt einsetzbar.

Text-Effekt



Text-Effekt

<div style="width: 100%; font-size: 40px;
 filter: Glow(color=#008000, strength=5)">Text-Effekt</div>

<div style="width: 100%; font-size: 35px;
 filter: DropShadow(color=#FFD700, offx=9, offy=-7)">Text-Effekt</div>