[an error occurred while processing this directive]
(Stand: 09.10.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,...)
strength Wischstä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,...)
strength Wischstä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]