CSS Referenz filter

0 | 9219 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS Referenz filter" mit Ihrem Wissen!

Anzeige Hier werben

fliter:

Effekte: alpha, blur, chroma, dropshadow, fliph(), flipv(), glow, gray, invert, mask, shadow, wave, xray
Anwendbar auf: siehe Liste

Die CSS filter: Eigenschaften wurden von Microsoft eingeführt um über CSS eine Möglichkeit der Bildbearbeitung zu bieten.

Firefox3.6Nein4+Nein
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Nein12Nein
1+Nein
Safari4Nein5Nein
filter

die propritäre CSS Eigenschaft filter wird nur vom Internet Explorer unterstützt!

filter gehört nicht zum CSS Standard!

anwendbar auf folgende Elemente

  • body
  • button
  • div
  • img
  • input
  • marquee
  • span
  • table
  • td
  • textarea
  • tfoot
  • th
  • thead
  • tr

Effekte

Effekte
Beispiel
Beschreibung / Werte
alpha()
filter:alpha(opacity=50, finishopacity=0, style=2) Transparenz / Verschmelzung
opacity
: 0-100 (0=transparent, 100=deckend)
finishopacity: 0-100 (0=transparent, 100=deckend)
style: 1-3 (1=additive Mischung, 2=radialer Veraluf, 3=rechteckiger Verlauf)
startx: Anfangspunkt von links (nur bei style=1)
starty: Anfangspunkt von oben (nur bei style=1)
finishx: Endpunkt von links (nur bei style=1)
finishy: Endpunkt von oben (nur bei style=1)
blur()
filter:blur(direction=30, strength=50) Unschärfe
direction: 0-360 Richtung in Grad im Uhrzeigersinn
strength: Strichlänge in Pixeln 0=kein Blur
add: true / false (Sichtbarkeit des Elements)
enabled: true / false (Aktivierung des Filters)
chroma()
filter:Chroma(color=#ccbb00) Einfärbung
color: Hex Farbangabe
dropshadow()
filter:dropshadow(color:green, offx=10, offy=10)
farbiger Schatten
color: Hex Farbangabe
enabled: true / false (Aktivierung des Filters)
offx: Verschiebung in px auf der x-Achse
offy: Verschiebung in px auf der y-Achse
positive: true / false (sollen transparente Elemente einen Schatten werfen)
fliph()
filter:fliph() horizontale Spiegelung
enabled: true / false (Aktivierung des Filters)
flipv()
filter:flipv() vertikale Spiegelung
enabled: true / false (Aktivierung des Filters)
glow()
filter:glow(color: red, strength: 5)
Glüheffekt
color: Hex Farbangabe
strength: 1-255 Effektstärke
gray()
filter:gray()
Graustufen
invert()
filter:invert()
Invertierung
enabled: true / false (Aktivierung des Filters)
mask()
filter:mask()
Transparenzmaske
ersetzt bei transparenten gifs die Transparente Fläche durch ein Farbe
color: Hex Farbangabe
enabled: true / false (Aktivierung des Filters)
shadow()
filter:shadow(color:ffcc00, direction:50)
Schatten
color: Hex Farbangabe
direction: 0-360 Richtung in Grad im Uhrzeigersinn
wave()
filter:wave(freq:3, lightstrength:20, phase:30, strength:5)
Welleneffekt/-störung
add: true / false
freq: Frequenz der Wellen
light / lightstrength: 0-100 Lichtstärke
phase: 0-100 Wellengrad
strength: 1-255 Effektstärke
enabled: true / false (Aktivierung des Effekts)
xray()
filter:xray()
Negativeffekt
Graustufen & Invertiert
enabled: true / false (Aktivierung des Effekts)

Beispiel

filter:glow  
HTML
1
<div style="width:400px; filter:glow(color=#ff0000, strength=5)">toller im Internet Explorer rot glühender Text</div>
Bild zu CSS Referenz filter
IE8 Screenshot ;)

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher hat 1 Person an der Seite "CSS Referenz filter" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Referenz filter" hier bearbeiten.