HTML bis PHP - CSS-Filter für IExlporer

[ MS-Filter ] [ Verschmelzen ] [ Verwischen ] [ Transparents ] [ Schattenwurf ] [ Spiegeln ] [ Glühender Rand ] [ Graustufen ] [ Wellengrafik ] [ Negativbild ]

MS-Filter

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

Spiegeln

Der Stylesheet filter:FlipV() spiegelt eine Grafik Vertikal und filter:FlipH() horizontal. Parameter sind nicht möglich.

  <img src="bild.jpg" style="filter:FlipH()"
    alt="Grafik horizontal spiegeln">
  <img src="bild.jpg" style="filter:FlipV()"
    alt="Grafik vertikal spiegeln">

Orginalbild	Bild mit FlipH	Bild mit FlipV

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

html-php.de