Internet Explorer
Bildeffekte auf die Schnelle
(msc) Der Internet Explorer gehört zwar nicht zu unseren Lieblingsbrowsern. Das soll uns aber nicht abhalten, hier einen Exklusiv-Tipp für Microsofts Websurfprogramm weiterzugeben. Webdesigner, die hauptsächlich für den Internet Explorer gestalten, haben die Möglichkeit, Bilder über Filter zu bearbeiten. Diese Filter ändern die Darstellung des Bildes, ohne dass das Originalbild verändert wird. In anderen Browsern wird der Filter ignoriert:
Alpha erlaubt es, das Bild mit dem Hintergrund zu verschmelzen:
<img src="demo.png"style="filter:Alpha(opacity=100, finishopacity=0, style)">
opacity gibt den Deckungsgrad an, 100 steht für vollständige Transparenz, 0 ist opak. Über style wird die Art der Transparenz vorgegeben: 0 gilt für das Bild als ganzes. 1 steht für einen linearen Verlauf, bei dem die Start- und Endpunkte über startx, starty, finishx und finishy definiert werden. Bei diesem Typ wird über finishopacity die Transparenz am Endpunkt des Verlaufs angegeben.
3 definiert einen rechteckigen Verlauf von innen nach aussen. Innen gilt der Wert für opacity, aussen der Wert für finishopacity.
Blur verwischt das Bild:
filter:Blur(direction=45, strength=40)
direction gibt die Richtung in Grad an; möglich sind nur 45°-Schritte. strength definiert die Stärke des Wisch-effekts.
Chroma gibt die Farbe vor, die Internet Explorer als Transparent darstellt:
filter:Chroma(color=#FFFF99)
DropShadow erzeugt einen Schattenwurf:
<div style="width:900px; height:700px; filter:dropShadow(color=black, offX=10, offY=10)"><img src="demo.png"></div>
Die drei Parameter geben erstens die Farbe des Schattens, zweitens den horizontalen und drittens den vertikalen Versatz des Schattens an. DropShadow() kann auch für Schriften verwendet werden. Die Angaben für width und height sind nötig.
FlipH spiegelt das Bild horizontal. Parameter sind keine nötig:
<img src="demo.png" style="filter:FlipH()">
FlipV spiegelt das Bild vertikal. Der Filter wird analog zu FlipH() benutzt.
Glow lässt Text oder den Rand eines Elements glühen:
<div style="filter:Glow(color=#000000, strength=12)">Glühend!</div>
color gibt die Farbe der «Glut» vor, strength die Stärke (von 1 bis 255)
Gray() wandelt das Bild in Graustufen um. Parameter sind keine nötig:
style="filter:Gray()"
Invert invertiert das Bild, d.h. macht aus dem Bild ein «Negativ». Parameter sind nicht nötig.
Ausführlichere Informationen, Beispiele und weitere Filter für den Internet Explorer werden auf der Webseite selfhtml.org erklärt:
http://de.selfhtml.org/css/eigenschaften/filter.htm
Der Schatten, den dieses Bild wirft, wurde über einen Filtereffekt erzeugt.