CSS / CSS Filter 1 2[IE]

von: Werner Zenk

Mit CSS-Filtern (Internet Explorer) wird ein besonderer Effekt erzielt,
etwa bei der Ausrichtung oder Darstellung von Bildern.
Die Filter sind alle miteinander kombinierbar.
Ausrichtung

Filter: Horizontal
Das Bild wird horizontal gedreht.
 <img src="monkeys.gif" style="filter: flipH()">

Filter: Vertikal
Das Bild wird vertikal gedreht.
 <img src="monkeys.gif" style="filter: flipV()">

Bild-Effekte


Filter: Gray
 <img src="monkeys.gif" style="filter: Gray()">


Filter: Xray
 <img src="monkeys.gif" style="filter: Xray()">


Filter: Invert
 <img src="monkeys.gif" style="filter: Invert()">


Filter: Emboss

 <img src="monkeys.gif"
 style="filter: progid:DXImageTransform.Microsoft.Emboss()">


Filter: Engrave

 <img src="monkeys.gif"
 style="filter: progid:DXImageTransform.Microsoft.Engrave()">


Filter: Pixelate

 <img src="monkeys.gif"
 style="filter: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=3)">
Werte  maxsquare: 1-25


Filter: Wave (Wellen-Effekt)

 <img src="monkeys.gif"
 style="filter: Wave(freq=3, light=35, phase=25, strength=6)">
Werte  freq: 5-50 (Wellenfrequenz); light: 0-100; phase: 0-100; strength: 1-10


Filter: Alpha (Vordergrund und Hintergrund verschmelzen)

 <img src="monkeys.gif"
 style="filter: Alpha(opacity=30, finishopacity=25, style=2)">
Werte  opacity: 0-100; finishopacity: 0-100; style: 0-3


Filter: Blur (Verwisch-Effekt)

 <img src="monkeys.gif"
 style="filter: Blur(direction=30, strength=45)">
Werte  direction: 0, 45, 90, 135, 180, 225, 270, 315 (Ausrichtung); strength: 1-100


Filter: Blur (2; Verwisch-Effekt)

 <img src="monkeys.gif" 
style="filter: progid:DXImageTransform.Microsoft.MotionBlur(direction=30, strength=45)">
Werte  direction: 0, 45, 90, 135, 180, 225, 270, 315 (Ausrichtung); strength: 1-100


Filter: Chroma (Transparenzfarbe)

 <img src="monkeys.gif"
 style="filter: Chroma(color=#000000)">
Mithilfe des Chroma-Filters, ist die schwarze Farbe aus dem Bild entfernt worden 
und wird nun transparent dargestellt. Werte  color:Hexadezimal-Wert


Filter: Glow (Glühender Rand)

 <img src="bild.gif"
 style="filter: Glow(color=#FF0000, strength=5)"> 
Werte  color: Hexadezimal-Wert (#FF00AA); strength: 1-25


Filter: Mask (Transparenzmaske)

 <img src="bild.gif" style="filter: Mask(color=#00FFFF)"> 
Werte  color: Hexadezimal-Wert


Filter: Shadow (Schatten)

 <img src="bild.gif" style="filter: Shadow(color=#FFD700, direction=45)"> 
Bild mit gelben Schatten.
Werte  color: Hexadezimal-Wert; 
direction: 0, 45, 90, 135, 180, 225, 270, 315 (Ausrichtung)


Filter: Dropshadow (Schattenwurf)

 <img src="bild.gif"
 style="filter: DropShadow(color=#A0A0A0, offx=6, offy=-3)"> 
Bild mit grauen Schatten.
Werte  color: Hexadezimal-Wert; offx: 5 |-3 (horizontal *); offy: 5 |-3 (vertikal *)
* Verwendbar sind positive und negative Werte


Die Filter:  Wave, Glow, Shadow und DropShadow sind auch als Text-Effekt einsetzbar.
      Text-Effekt


      Text-Effekt
<div style="width: 100%; font-size: 40px;
 filter: Glow(color=#008000, strength=5)">Text-Effekt</div>

<div style="width: 100%; font-size: 35px;
 filter: DropShadow(color=#FFD700, offx=9, offy=-7)">Text-Effekt</div>
 Das könnte Sie interessieren:
CSS Befehle: Abstand  Vokabeltrainer - Ein kleiner Vokabeltrainer. Funktioniert im Zusammenspiel von JavaScript und PHP. Die Vokabeln können wahlweise in deutsch oder englisch abgefragt werden.  Design in der Titelzeile  Mit PHP schreiben und lesen (13) - Mit PHP zeichnen - Eine Grafik mit PHP erstellen. Mit den Grafikfunktionen können Sie zur Laufzeit des PHP-Scripts auch Grafiken erzeugen.  Bilder Animator - Der Bilder Animator erstellt eine Diashow mit JavaScript.  Terminkalender - Ein einfacher Terminkalender der wichtige Ereignisse fest hält. Termine können eingetragen und wieder gelöscht werden.  Zähler (Countown) mit Weiterleitung  Stil  RSS Leser - Der RSS Leser liest RSS Feeds von anderen Webseiten aus und zeigt diese strukturiert auf der Seite an. Der ausgewählte Feed wird über AJAX zurück an den Browser gesendet, so können Feeds gelesen werden ohne die Seite neu laden zu müssen.  …mehr
 Seitenanfang        Lesezeichen setzen          
Letzte Änderung am Montag, den 06 Juli 2009
© 2000-2010 Homepage-Total.de         KontaktImpressumBanner