Verwalten Sie Ihre Webfarben

Behalten Sie mit MyColor Studio den Überblick über Ihre Onlineprojekte

Hier klicken und mehr erfahren

Schnelle Seiten gefällig?

Befreien Sie Ihre Webseiten mit wenigen Mausklicks von unnötigem Balast

Hier klicken und mehr erfahren

Effektfilter mit CSS

Der Microsoft Internet Explorer bringt ab der Version 4.0 einige Effekte aus der Bildbearbeitung mit, mit denen sich Objekte optisch aufgewertet präsentieren lassen. Leider werden diese Effekte von anderen Browsern ignoriert, verursachen aber auch keine Fehlermeldungen. Trotzdem lassen sich damit interessante Hingucker ohne Mehraufwand bewerkstelligen.

Die Filter werden in Form von CSS-Eigenschaften angewendet, die Syntax lautet also:

filter:filtername(parameter)

So sorgt z. B. <img src="grafik.gif" style="filter:FlipH();"> für eine horizontal gespiegelte Grafik.

Folgende HTML-Elemente können mit Microsofts eigener Effektschmiede verfeinert werden:

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

Die Filter in der Übersicht

Alpha()

Funktion:

Überblendung

Syntax:

Alpha(opacity=X, finishopacity=X, style=X)

Parameter  

opacity
Deckungsgrad am Verschmelzungsursprung, Werte zwischen 0 (100% Transparenz) und 100 (0% Transparenz)
finishopacity
Deckungsgrad am Verschmelzungsendpunkt, Werte zwischen 0 (100% Transparenz) und 100 (0% Transparenz)
style
Anwendungsart des Filters:
0: Farbliches Addieren von Vorder- und Hintergrund
1: Linearer Verlauf vom Start- zum Endpunkt (s.u.)
2: Radialer Verlauf von innen (opacity) nach außen (finishopacity)
3: Rechteckiger Verlauf von innen (opacity) nach außen (finishopacity)
 
Bei style=1 werden die Start- und Endpunkte vorgegeben mit:
startx: Anfangspunkt als x-Koordinate vom linken Rand
starty: Anfangspunkt als y-Koordinate vom oberen Rand
finishx: Endpunkt als x-Koordinate vom linken Rand
finishy: Endpunkt als y-Koordinate vom oberen Rand
(Werte in Pixeln)

Beispiel

Alpha
 

Blur()

Funktion:

Verwischen

Syntax:

blur(add=X, direction=X, strength=X)

Parameter  

add=0 oder add=1
Beibehalten (1) oder Ersetzen (0) der Originalgrafik
direction
Richtung in 45-Grad-Schritten (45,90,135,180,...)
strengthWischstärke (0=Kein Verwischen)

Beispiel

Blur
 

Chroma()

Funktion:

Farben Transparenz verleihen

Syntax:

Chroma(color=X)

Parameter  

color
Zu ersetzende Farbe (z. B. #000000 oder black)

Beispiel

Chroma
 

DropShadow()

Funktion:

Schattenwurf

Syntax:

DropShadow(color=X, offx=X, offy=X, positive=X)

Parameter  

color
Schattenfarbe (z. B. #000000 oder black)
offx
Horizontaler Abstand; bei negativen Werten nach links, bei positiven nach rechts
offy
Vertikaler Abstand; bei negativen Werten nach oben, bei positiven nach unten
positive
Mit positive=1 wird nur den transparenten Bereichen ein Schatten zugeordnet, wird dieser Parameter nicht gesetzt, wird das komplette Objekt berücksichtigt

Beispiel

Grammiweb
 

FlipH()

Funktion:

Horizontales Spiegeln

Syntax:

FlipH()

Parameter  

/

Beispiel

FlipH
 

FlipV()

Funktion:

Vertikales Spiegeln

Syntax:

FlipV()

Parameter  

/

Beispiel

FlipV
 

Glow()

Funktion:

Glühen

Syntax:

Glow(color=X; strength=X)

Parameter  

color
Glühfarbe (z. B. #FF0000 oder red)
strength
Glühintensität (1 bis 255)

Beispiel

Grammiweb
 

Gray()

Funktion:

Farbinformationen entfernen

Syntax:

Gray()

Parameter  

/

Beispiel

Gray
 

Invert()

Funktion:

Invertieren

Syntax:

Invert()

Parameter  

/

Beispiel

Invert
 

Mask()

Funktion:

Ersetzen der transparenten Bereiche einer Grafik durch eine beliebige andere Farbe

Syntax:

Mask(color=X)

Parameter  

color
Zu ersetzende Farbe (z. B. #FFFFFF oder white)

Beispiel

Mask
 

MotionBlur()

Funktion:

Bewegungsunschärfe

Syntax:

progid:DXImageTransform.Microsoft.MotionBlur(Add='X', Direction=X, Strength=X)

Parameter  

add=false oder add=true
Beibehalten (true) oder Ersetzen (false) der Originalgrafik
direction
Richtung in 45-Grad-Schritten (45,90,135,180,...)
strengthWischstärke (0=Kein Verwischen)

Beispiel

MotionBlur
 

Shadow()

Funktion:

Verlaufsschatten

Syntax:

Shadow(color=X,direction=X,strength=X)

Parameter  

color
Schattenfarbe (z. B. #000000 oder black)
direction
Richtung in 45-Grad-Schritten (45,90,135,180,...)
strength
Schattengröße

Beispiel

Grammiweb
 

Wave()

Funktion:

Wellenförmige Verzerrung

Syntax:

Wave(freq=X, light=X, phase=X, strength=X, add=X)

Parameter  

freq
Wellenfrequenz. Je niedriger der Wert, desto größer sind die Wellen, je höher der Wert, desto kleiner.
light
Lichtstärke im Welleneffekt (0-100)
phase
Sinuswellenphase (0-100)
strength
Stärke des Welleneffektes
add=0 oder add=1
Beibehalten (1) oder Ersetzen (0) der Originalgrafik

Beispiel

Wave
 

XRay()

Funktion:

Negativ-Effekt

Syntax:

XRay()

Parameter  

/

Beispiel

XRay
 


Zurück zum Inhaltsverzeichnis

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 20.04.2018
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt