Was sind CSS Filter?
CSS definiert bestimmte Filter, die auf Objekte (vor allem Bilder) ganz nette visuelle Effekte zaubern. Leider werden diese Effekte nur im Internet-Explorer angezeigt, da die meisten Filter von Microsoft entwickelt sind.
Firefox, Netscape und Co. sträuben sich mächtig dagegen.
Als Beispiel soll ein Landschaftsbild dienen.
Für alle Neugierigen: Es ist ein Foto aus der Straße meines Elternhaues in Hermsdorf/Thüringen mit Blick auf den Waldrand.
Wie die Filter aussehen, die direkt in das img src - Tag gepresst werden, habe ich farblich hervorgehoben.
Bild in Graustufen
<img src="http://www..../bild.jpg" style="filter:gray()">
Bild transperieren
<img src="http://www..../bild.jpg" style="filter:alpha(style=0,opacity=50)">
Das Objekt wird entsprechend dem Hintergrund des Webdokuments transparent dargestellt.Das Atribut opacity=ZAHL legt die Stärke fest.
"Zahl" wäre ein Wert von 0 bis 100, wobei es bei 0 ganz verschwindet und bei 100 in voller "Kraft" zu sehen ist.
Bild rund/oval transperieren
<img src="http://www..../bild.jpg" style="filter:alpha(style=2,opacity=100,finishOpacity=0)">
Bild verwischen
<img src="http://www..../bild.jpg" style="filter:blur(direction=45, strength=99)">
direction bestimmt die Winkel-Verwischrichtung (optimal wären z.B.: 0°, 45°, 90°, 135°, 180°), strength bestimmt dann die StärkeBild spiegeln
<img src="http://www..../bild.jpg" style="filter:FlipH()"> (horizontal)
<img src="http://www..../bild.jpg" style="filter:FlipV()"> (vertikal)
Bild invertieren
<img src="http://www..../bild.jpg" style="filter:progid:DXImageTransform.Microsoft.BasicImage(Invert=1)">
Bild röntgen
<img src="http://www..../bild.jpg" style="filter:progid:DXImageTransform.Microsoft.BasicImage(XRay=1)">
Bild verpixeln
<img src="http://www..../bild.jpg" style="filter:progid:DXImageTransform.Microsoft.Pixelate(maxsquare=5)">
Der Wert für "maxsquare" kann wie gewünscht angepasst werden.Bild prägen
<img src="http://www..../bild.jpg" style="filter:progid:DXImageTransform.Microsoft.Emboss()">
Bildrand glühen lassen
<img src="http://www..../bild.jpg" style="filter:progid:DXImageTransform.Microsoft.Glow(color=#FF5F00,strength=15)">
Die Werte für "color" und "strength" können nach Wunsch verändert werden.Bildschatten erzeugen
<img src="http://www..../bild.jpg" style="filter:progid:DXImageTransform.Microsoft.Shadow(direction=45,color=#00005F,strength=12)">
Die Werte für "direction(°-Wert)", "color" und "strength" können nach Wunsch verändert werden.Bildwellen
<img src="http://www..../bild.jpg" style="filter:progid:DXImageTransform.Microsoft.Wave(freq=3,LightStrength=50,Phase=40,Strength=8)">
Sämtliche Werte können verändert werden! (selber testen bitte)