MS-Filter
Da es inzwischen den InternetExplorer nicht mehr gibt, sind MS-Filter heute nicht mehr möglich.
Die hier vorgestellten Grafik-CSS-Stylesheets gehören nicht zum HTML-Standard und werden meines Wissens nur vom
MS-Internet-Explorer unterstützt. Andere Browser zeigen die
Bilder und die Texte normal an.
Untergrund und Grafik verschmelzen
Mit den Stylesheet filter:Alpha()
kann man die Untergrundgrafik mit einer Vordergrundgrafik miteinander
verschmelzen. Folgende Attribute werden benötigt:
opacity=
Deckgrad der Verschmelzung in der Mitte der Grafik.
finishopacity=
Deckgrad der Verschmelzung am Rand der Grafik.
Erlaubt sind Werte zwischen 0 und 100. Der Wert 0 bedeutet: vollkommen transparent (Hintergrund scheint voll durch),
der Wert 100 bedeutet: vollkommen abdeckend (Hintergrund scheint nicht durch).
style=
Art, in der der Filter wirkt. Erlaubt sind die Werte 0,1,2 und 3.
0:
Der Hintergrund wird farblich mit den Vordergrund addiert. Das Vordergrundelement wird farblich entsprechend
manipuliert, so das keine Verschmelzung dargestellt wird. Die Angaben zu den anderen Parametern sind in diesem Fall nicht
erforderlich: Alpha(style=0)
genügt.
1:
linearer Verlauf, 2:
radialer (elliptischer) Verlauf, 3:
rechteckiger Verlauf
Bei 1 kann auch der Start und Endpunkt mit angegeben werden, dabei bedeutet:
startx=
Anfangspunkt in Pixel horizontal vom linken Rand des Vordergrundelements.
starty=
Anfangspunkt in Pixel vertikal vom oberen Rand des Vordergrundelements.
finishx=
Endpunkt in Pixel horizontal vom linken Rand des Vordergrundelements.
finishy=
Endpunkt in Pixel vertikal vom oberen Rand des Vordergrundelements.
Beispiel:
<body style="background-image:url(bilder/stein.jpg)">
<img src="bilder/bsp2.gif" alt="Grafik" border="0"
style="filter:Alpha(opacity=80, finishopacity=80, style=2)
width:218px height:69px;">
</body>
Grafik verwischen
Der Stylesheet filter:Blur()
verwischt eine Grafik. Dazu gibt es folgende Attribute:
direction=
Mit diesem Parameter geben Sie den Winkel an, in der die Verwischspur führt, das sieht dann so aus,
als ob die Grafik aus dieser Richtung kommt. Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270, 315:
0 bedeutet: Die Verwischspur zeigt nach oben; 90 bedeutet: Die Verwischspur zeigt nach rechts;
180 bedeutet: Die Verwischspur zeigt nach unten; 270 bedeutet: Die Verwischspur zeigt nach links.
strength=
Die stärke des Verwisch-Effektes gibt man mit diesem Parameter an. 0 bedeutet keinen Verwisch-Effekt,
jeder höhere Wert die Verwischspur in Pixeln. Beachten Sie jedoch, dass die Grafik innerhalb ihrer normalen Bildgröße
dargestellt wird. Verwischspuren von Konturen, die sehr nah am Bildrand sind, werden nur bis zum Bildrand gezogen.
Beispiel:
<img src="bild.jpg" alt="Bild"
style="filter:Blur(direction=225, strength=30)">
<div style="font-size:36pt; padding:20px; width:100%; color:#0000FF;
filter:Blur(direction=225, strength=10)">Blur-Effekt und Text</div>
Orginalbild |
mit Blur |
Text mit Blur |
|
|
Blur-Effekt und Text
|
Grafik transparent darstellen
Mit filter:Chroma()
kann eine Grafik transparent angezeigt werden. Als Parameter wird die Farbe angegeben, die transparent
dargestellt werden soll:
<img src="bild.gif" style="filter:Chroma(color=#848484)"
alt="Bild mit Stylesheet">
Orginalbild |
Bild mit Stylesheet |
 |
 |
Schattenwurf
Der Stylesheet filter:DropShadow()
und filter:Shadow()
kann ein Schattenwurf definiert
werden. Folgende Attribute sind bei filter:DropShadow()
möglich
color=
Die Schattenfarbe
offx=
Pixel für den horizontalen Schatteneffekt. Positive Zahlen bewirken einen Schatteneffekt rechts,
negative mit Minuszeichen davor einen Schatteneffekt links.
offy=
Pixel für den vertikalen Schatteneffekt. Positive Zahlen bewirken einen Schatteneffekt unten,
negative mit Minuszeichen davor einen Schatteneffekt oben.
Folgende Attribute sind bei filter:Shadow()
möglich
color=
Eine Schattenfarbe (siehe Farbangaben).
direction=
Die Richtung an, in die der Schatten geworfen wird (Winkel). Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270, 315
<div style="width:100%; font-size:32pt; color:blue;
filter:DropShadow(color=#FF0000, offx=2, offy=2)">
Text mit Schattenwurf</div>
<div style="width:100%; font-size:32pt; color:blue;
filter:Shadow(color=#FF0000, direction=45)">
Text mit Schattenwurf</div>
Text mit Schattenwurf
Text mit Schattenwurf
Glühender Rand
Der Stylesheet filter:Glow()
verleit einer Grafik oder einem Text einen glühenden Rand.
Folgende Parameter sind möglich
color=
Die Glühfarbe
strength=
Stärke der Wirkung zwischen 1 und 255 - real ist aber nur 1-20:
<div style="width:100%; font-size:32pt; color:#0000FF;
filter:Glow(color=orangered, strength=12)">
Glühender Text</div>
Glühender Text
Graustufen-Grafik
Mit filter:Gray()
können Sie Graustufen erzwingen.
<img src="bild.jpg" style="filter:gray()"
alt="Graustufenbild">
Orginalbild |
Graustufenbild |
 |
 |
Transparenzmaske
Mit
filter:Mask()
wird eine transparente umdefiniert. Was vorher transrarent war, bekommt nun die angegebene
Farbe
color=
und alle Farbangaben werden Transparent
<img src="bild.gif" style="filter:mask(color:blue)"
alt="Grafik">
Orginalbild |
Grafik mit Mask-Stylesheet |
 |
 |
Wellengrafik
Mit filter:Wave() kann eine wellenartige Verzerrung definiert werden. Dieser Filter erwartet folgende Parameter:
freq=
Die Wellenfrequenz. Je höher der Wert, desto kleiner die Wellen. Werte zwischen 5 und 50 sind real.
light=
Stärke des Lichts in Prozent (1 bis 100).
phase=
Beginn der Sinus-Wellenphase in Prozent (1 bis 100). 25 entspricht 90 Grad
strength=
Stärke des gesamten Effekts (1 und 10).
<div style="width:100%; font-size:48pt; font-weight:900; color:#0000FF;
filter:Wave(freq=10, light=25, phase=50, strength=3)
Shadow(color=#C0C0FF, direction=135);">
Welliger Text</div>
Welliger Text
Negativbild
Mit
filter:XRay()
kann eine Grafik im Negativ dargestellt werden.
<img src="bild.gif" style="filter:xray()"
alt="Grafik">
Orginalbild |
Negativbild |
 |
 |