CSS Referenz filter

0 | 0 Kommentare | 3965 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.

Firefox2Nein3Nein3.5Nein
IE6Unterstützt7Unterstützt8Unterstützt
Opera9.5Nein10Nein
Safari3Nein4Nein
33%
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  
Dieses Beispiel ausprobieren
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.

Mitarbeiter

Kommentare: CSS Referenz filter