[an error occurred while processing this directive]
(Stand: 22.12.24, Adresse: http://www.grammiweb.de/uebersichten/cssfilter.shtml)
Effektfilter mit CSS
Der Microsoft Internet Explorer bringt ab der Version 4.0 einige Effekte aus der
Bildbearbeitung mit, mit denen sich Objekte optisch aufgewertet präsentieren lassen.
Leider werden diese Effekte von anderen Browsern ignoriert, verursachen aber auch
keine Fehlermeldungen. Trotzdem lassen sich damit interessante Hingucker ohne
Mehraufwand bewerkstelligen.
Die Filter werden in Form von CSS-Eigenschaften angewendet, die Syntax lautet also:
filter:filtername(parameter)
So sorgt z. B. <img src="grafik.gif" style="filter:FlipH();">
für eine horizontal gespiegelte Grafik.
Folgende HTML-Elemente können mit Microsofts eigener Effektschmiede verfeinert werden:
body, button, div, img, input, marquee, span, table, td, textarea, tfoot, th, thead, tr
Die Filter in der Übersicht
|
Funktion: | Überblendung |
Syntax: | Alpha(opacity=X, finishopacity=X, style=X)
|
Parameter | opacity
Deckungsgrad am Verschmelzungsursprung, Werte zwischen 0 (100% Transparenz) und 100 (0% Transparenz)
finishopacity
Deckungsgrad am Verschmelzungsendpunkt, Werte zwischen 0 (100% Transparenz) und 100 (0% Transparenz)
style
Anwendungsart des Filters:
0: Farbliches Addieren von Vorder- und Hintergrund
1: Linearer Verlauf vom Start- zum Endpunkt (s.u.)
2: Radialer Verlauf von innen (opacity) nach außen (finishopacity)
3: Rechteckiger Verlauf von innen (opacity) nach außen (finishopacity)
Bei style=1 werden die Start- und Endpunkte vorgegeben mit:
startx: Anfangspunkt als x-Koordinate vom linken Rand
starty: Anfangspunkt als y-Koordinate vom oberen Rand
finishx: Endpunkt als x-Koordinate vom linken Rand
finishy: Endpunkt als y-Koordinate vom oberen Rand
(Werte in Pixeln)
|
Beispiel | 
|
|
Funktion: | Verwischen |
Syntax: | blur(add=X, direction=X, strength=X)
|
Parameter | add=0 oder add=1
Beibehalten (1) oder Ersetzen (0) der Originalgrafik
direction
Richtung in 45-Grad-Schritten (45,90,135,180,...)
strengthWischstärke (0=Kein Verwischen)
|
Beispiel |
|
|
Funktion: | Farben Transparenz verleihen |
Syntax: | Chroma(color=X)
|
Parameter | color
Zu ersetzende Farbe (z. B. #000000 oder black)
|
Beispiel |
|
|
Funktion: | Schattenwurf |
Syntax: | DropShadow(color=X, offx=X, offy=X, positive=X)
|
Parameter | color
Schattenfarbe (z. B. #000000 oder black)
offx
Horizontaler Abstand; bei negativen Werten nach links, bei positiven nach rechts
offy
Vertikaler Abstand; bei negativen Werten nach oben, bei positiven nach unten
positive
Mit positive=1 wird nur den transparenten Bereichen ein Schatten zugeordnet, wird dieser Parameter nicht gesetzt, wird das komplette Objekt berücksichtigt
|
Beispiel | Grammiweb
|
|
Funktion: | Horizontales Spiegeln |
Syntax: | FlipH()
|
Parameter | / |
Beispiel |
|
|
Funktion: | Vertikales Spiegeln |
Syntax: | FlipV()
|
Parameter | / |
Beispiel |
|
|
Funktion: | Glühen |
Syntax: | Glow(color=X; strength=X)
|
Parameter | color
Glühfarbe (z. B. #FF0000 oder red)
strength
Glühintensität (1 bis 255)
|
Beispiel | Grammiweb
|
|
Funktion: | Farbinformationen entfernen |
Syntax: | Gray()
|
Parameter | / |
Beispiel |
|
|
Funktion: | Invertieren |
Syntax: | Invert()
|
Parameter | / |
Beispiel |
|
|
Funktion: | Ersetzen der transparenten Bereiche einer Grafik durch eine beliebige andere Farbe |
Syntax: | Mask(color=X)
|
Parameter | color
Zu ersetzende Farbe (z. B. #FFFFFF oder white)
|
Beispiel |
|
|
Funktion: | Bewegungsunschärfe |
Syntax: | progid:DXImageTransform.Microsoft.MotionBlur(Add='X', Direction=X, Strength=X)
|
Parameter | add=false oder add=true
Beibehalten (true) oder Ersetzen (false) der Originalgrafik
direction
Richtung in 45-Grad-Schritten (45,90,135,180,...)
strengthWischstärke (0=Kein Verwischen)
|
Beispiel |
|
|
Funktion: | Verlaufsschatten |
Syntax: | Shadow(color=X,direction=X,strength=X)
|
Parameter | color
Schattenfarbe (z. B. #000000 oder black)
direction
Richtung in 45-Grad-Schritten (45,90,135,180,...)
strength
Schattengröße
|
Beispiel | Grammiweb
|
|
Funktion: | Wellenförmige Verzerrung |
Syntax: | Wave(freq=X, light=X, phase=X, strength=X, add=X)
|
Parameter | freq
Wellenfrequenz. Je niedriger der Wert, desto größer sind die Wellen, je höher der Wert, desto kleiner.
light
Lichtstärke im Welleneffekt (0-100)
phase
Sinuswellenphase (0-100)
strength
Stärke des Welleneffektes
add=0 oder add=1
Beibehalten (1) oder Ersetzen (0) der Originalgrafik
|
Beispiel |
|
|
Funktion: | Negativ-Effekt |
Syntax: | XRay()
|
Parameter | / |
Beispiel |
|
Zurück zum Inhaltsverzeichnis
[an error occurred while processing this directive]
[an error occurred while processing this directive]
