Geschrieben von robinsons am 16.04.2005, 12:18

Es gibt im internetexplorer verschiedene Filter für Texte und Grafiken, die z.b. einen Schatten, Transparenz, Spiegelungen etc. erzeugen.
diese werden jeweils mit CSS definiert!

Ich kann allerdings nicht garantieren, hier alle zu erklären, denn auch ich kenne nicht alle; -)
Filter werden im allgemeinen so definiert:
in den bild-tag wird immer folgendes eingefügt:
style = "filter:filtername(angaben_zum_filter, getrennt_durch_komma)"

bei Texteffekten wird ein divbereich beschrieben, der auch wie bei Bilder diese angaben hat:
style = "filter:filtername(angaben_zum_filter, getrennt_durch_komma)"

Jetzt aber zu den filtern selber :]

1. Filter: verwischen
Mit diesem Filter können Grafiken oder texte mit einem Verwischeffekt ausgestattet werden!

bei Bildern:
der Stylebereich sieht folgendermaßen aus:

style = "filter:Blur(direction=315, strength=40)"

direction steht dabei für die Richtung, in die die Verwischung führt; es gibt folgende zahlen:
0 für oben rechts,
45 rechts oben,
90 rechts,
135 unten rechts,
180 unten,
225 links,
315 oben links

und stregth dafür, wie lang oder groß der Effekt sein soll; 0 heißt, es gibt gar keinen Effekt, und alle weiteren zahlen stehen für die angaben in pixeln!

bei Text:
der divbereich sieht folgendermaßen aus:
<div style = "filter:Blur(direction=235, strength=10)">Dieser text ist verwischt1</div>

Die angaben direction und strength sind dabei die gleichen wie bei den Bildern!

2. Filter: Transparenz
Mit diesem Filter können Grafiken mit einem Transparenzeffekt ausgestattet werden!

bei Bildern:
der Stylebereich sieht folgendermaßen aus:

style = "filter:Chroma(color=#000000)"

color=#000000 ist dabei die Hexadezimalnotation, die die transparente Farbe angibt!
Diese muss natürlich nicht, wie bei meinem Beispiel hier, schwarz sein!

3. Filter: Schattenwurf
Mit diesem Filter können Grafiken und texte mit einem Schatten versehen werden!

bei texten:
Der Stylebereich sieht folgendermaßen aus (hier habe ich die angaben zum divbereich nur weggelassen!):

style = "filter:DropShadow(color=#000000, offx=5, offy=6)"

color=#000000 ist dabei die Farbe, die der Schatten haben soll; offx=5 ist dabei für die horizontale Anzahl an pixeln, und offy=6 steht für die vertikale Anzahl an pixeln!

bei Bildern:
der Stylebereich sieht folgendermaßen aus:

style = "filter:DropShadow(color=#000000, offx=5, offy=6)"

Die angaben für color, offx und offy sind dabei die gleichen wie bei texten!

4. Filter: glühender Rand
Mit diesem Filter können Grafiken oder texte mit einem glühenden Rand versehen werden!

bei Bildern:
der Stylebereich sieht folgendermaßen aus:

style =" filter:Glow(color=#000000, strength=15)"

color=#000000 ist wieder die Farbe des Randes, und strength wieder die stärke!

bei texten:
der Stylebereich sieht folgendermaßen aus:

style = "filter:Glow(color=#000000, strength=15)"

Die angaben color etc. sind wieder die gleichen wie bei Bildern!

4. Filter: glühender Rand
Mit diesem Filter können Grafiken oder texte mit einem glühenden Rand versehen werden!

bei Bildern:
der Stylebereich sieht folgendermaßen aus:

style =" filter:Glow(color=#000000, strength=15)"

color=#000000 ist wieder die Farbe des Randes, und strength die stärke!

bei texten:
der Stylebereich sieht folgendermaßen aus:

style = "filter:Glow(color=#000000, strength=15)"

Die angaben color etc. sind wieder die gleichen wie bei Bildern!

5. Filter: Schatten
Mit diesem Effekt können Grafiken und texte mit einem Schatten versehen werden, der aber eher wie eine Weiterführung des orginals aussieht!

bei Bildern:
der Stylebereich sieht folgendermaßen aus:

style = "filter:Shadow(color=#000000, direction=270)"

color=#000000 ist wieder die Farbe des Randes, und strength ist wieder, wie beim Verwischeffekt, die Angabe, in welche Richtung er gehen soll (es zählen die gleichen angaben wie beim blureffekt)

bei texten:
der Stylebereich sieht folgendermaßen aus:

style = "filter:Shadow(color=#000000, strength=270)"

Die angaben color etc. sind wieder die gleichen wie bei Bildern!

6. Filter: Wellentext
Mit diesem Effekt können Grafiken und texte wie wellen aussehen!

bei texten:
der Stylebereich sieht folgendermaßen aus:

style = "filter:Wave(freq=5, lightstrength=10, strength=5)"

freq=5 steht dabei für die Häufigkeit der Wellen; je höher die zahl ist, desto kleiner werden die wellen!
lightstrength=10 steht für die Stärke des lichtes, und wird in Prozentangaben gemacht!
strength=5 steht wie immer für die Stärke des gesamten Effekts!

Bewertung Anzahl
5
50,0 %
1 Bewertungen
4
50,0 %
1 Bewertungen