Ramnips Homepage-Help      www.chathomepage.de  
CSS - Objekt-Filter (nur Internet-Explorer)

« Zurück zur CSS-Auswahl



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ärke


Bild 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)