SELFHTML: Stylesheets / CSS-Eigenschaften / Filter (nur Microsoft)
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche CSS-Eigenschaften es beim Internet Explorer gibt, um grafische Filterfunktionen anzuwenden.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, HTML, CSS-Eigenschaften, Filter, Effekte, Schatten, Glühen, Verzerrung, Invertierung, filter:Alpha, filter:Blur, filter:Chroma, filter:DropShadow, filter:FlipH, filter:FlipV, filter:Glow, filter:Gray, filter:Invert, filter:Mask, filter:Shadow, filter:Wave, filter:XRay
Date: 2005-10-30T14:19:30+01:00

| # Filter (nur Microsoft)
| Allgemeines zu Filtern filter:Alpha() (Vordergrund/Hintergrund verschmelzen) filter:Blur() (Verwisch-Effekt) filter:Chroma() (Transparenzfarbe) filter:DropShadow() (Schattenwurf) filter:FlipH() (Horizontal spiegeln) filter:FlipV() (Vertikal spiegeln) filter:Glow() (Glühender Rand) filter:Gray() (Graustufen) filter:Invert() (Invertieren) filter:Mask() (Transparenzmaske) filter:Shadow() (Schatten) filter:Wave() (Wellenartige Störung) filter:XRay() (Fotonegativ-Effekt)

## Allgemeines zu Filtern

Die hier vorgestellten Eigenschaften kommen aus dem Bereich der Bildbearbeitung. Die Filter berechnen Effekte, die sich auf geeignete Objekte anwenden lassen.

Durch diese Filter werden zwar sehr interessante optische Effekte möglich. Auch kunstvolle Textgestaltung ist damit möglich, was manche Grafik ersparen hilft. Dennoch sind all die Eigenschaften für Filter kein CSS-Standard und ein proprietäres Leistungsmerkmal des Internet Explorer. Andere Browser interpretieren diese Eigenschaften nicht.

Sie können für einzelne Elemente Filter angeben, die das Element dynamisch verändern. Das Prinzip ist immer das gleiche.

### Beispiel:

    <img src="grafik.gif" style="filter:Blur(strength=50)">
    <img src="grafik.gif" style="filter:Blur(strength=50) FlipH();">

### Erläuterung:

Mit `filter:` können Sie einen Effekt-Filter bestimmen. Hinter dem Doppelpunkt folgt der Aufruf eines Filters. Einige Filter erwarten Parameter, andere nicht. Die Parameter und Ihre Wertangaben zu den Filtern notieren Sie in Klammern unmittelbar hinter dem Filternamen, so wie im obigen Beispiel `(strength=50)` als Parameter an den Filter `Blur()` übergeben wird mit einem Gleichheitszeichen. Wenn ein Filter keine Parameter erwartet, notieren Sie trotzdem die Klammern, lassen den Inhalt dazwischen aber leer.

Sie können auch mehrere Filter kombinieren. Im zweiten der obigen Beispiele werden etwa die beiden Filter `Blur()` und `FlipH()` kombiniert. Dazu dürfen Sie nur einmal das Schlüssenwort `filter:` notieren. Zwischen diesem Schlüsselwort und dem nächsten Semikolon (`;`) zum Abschließen der Stylesheet-Angabe können Sie mehrere Filter notieren. Trennen Sie die Filter durch ein Leerzeichen vor dem Namen des nächsten Filters, so wie im Beispiel vor `FlipH()`.

Die Filter sind für die folgenden HTML-Elemente gedacht (bei anderen funktionieren sie nicht):

`body` (Effekt betrifft die gesamte angezeigte Seite)
`button` (Effekt betrifft die Schaltfläche)
`div` (Effekt betrifft den Bereich in Verbindung mit den Stylesheet-Angaben `width:` und/oder `height:` und/oder `position:`)
`img` (Effekt betrifft die referenzierte Grafik)
`input` (Effekt betrifft das Eingabefeld)
`marquee` (Effekt betrifft den Lauftext)
`span` (Effekt betrifft den Bereich in Verbindung mit den Stylesheet-Angaben `width:` und/oder `height:` und/oder `position:`)
`table` (Effekt betrifft die Tabelle)
`td` (Effekt betrifft die Datenzelle einer Tabelle)
`textarea` (Effekt betrifft das mehrzeilige Eingabefeld)
`tfoot` (Effekt betrifft den Fußbereich einer Tabelle)
`th` (Effekt betrifft die Kopfzelle einer Tabelle)
`thead` (Effekt betrifft den Kopfbereich einer Tabelle)
`tr` (Effekt betrifft die Zeile einer Tabelle)

### Beachten Sie:

Es gibt noch drei weitere Microsoft-Filter, die jedoch Script-Sprachen-Unterstützung benötigen. Überhaupt werden diese Filter erst so richtig interessant, wenn sie dynamisch verändert werden. Lesen Sie dazu im Kapitel über Dynamisches HTML den Abschnitt Dynamische Filter (nur Microsoft).

Auf dieser Seite werden die Filter beschrieben, die mit dem Internet Explorer 4.0 eingeführt wurden. Mit der Version 5.5 seines Browsers hat Microsoft wieder eine neue, erweiterte Syntax eingeführt.
An die Stelle des Syntax-Schemas: `filter:filtername(Eigenschaften)`
tritt das neue Syntax-Schema: `filter:progid:DXImageTransform.Microsoft.filtername(Eigenschaften)`

## filter:Alpha() (Vordergrund/Hintergrund verschmelzen)

Mit diesem Filter können Sie Vordergrundelemente mit Hintergrundelementen farblich verschmelzen. Der Filter erlaubt verschiedene Möglichkeiten, wie ein Vordergrundelement aus seinem Hintergrund "heraustreten" kann.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:Alpha()</title>
    </head><body>

    <div style="background-image:url(background3.jpg); padding:20px; text-align:center">
    <img src="filter_alpha.gif" style="filter:Alpha(opacity=100, finishopacity=0, style=2)" width="247" height="383" alt="Grafik"></div>

    </body></html>

### Erläuterung:

Mit `filter:Alpha()` können Sie Vordergrundelemente und Hintergrundelemente ineinander verschmelzen. Geeignet ist der Filter z.B. für Grafiken, die auf Hintergrundgrafiken erscheinen. Dieser Filter erwartet folgende Parameter:

`opacity` steht für den Deckgrad am Ursprung der Verschmelzung. Erlaubt sind Werte zwischen 0 und 100. Wert 0 bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100 bedeutet: vollkommen abdeckend (Hintergrund scheint nicht durch).

`finishopacity` steht für den Deckgrad am Ende der Verschmelzung. Erlaubt sind Werte zwischen 0 und 100. Wert 0 bedeutet: vollkommen transparent (Hintergrund scheint voll durch), Wert 100 bedeutet: vollkommen abdeckend (Hintergrund scheint nicht durch).

`style` steht für die Art, in der der Filter wirkt. Erlaubt sind die Werte 0, 1, 2 und 3.
0 bedeutet: Hintergrund und Vordergrund werden farblich addiert. Das Vordergrundelement wird farblich entsprechend manipuliert. Keine Verschmelzung. Angaben zu den anderen Parametern sind in diesem Fall nicht erforderlich, d.h. `Alpha(style=0)` genügt.
1 bedeutet: linearer Verlauf von einem selbst definierbaren Anfangspunkt zu einem selbst definierbaren Endpunkt. Am Anfangspunkt gilt der Wert, der bei `opacity` angegeben wird. Ab dem Endpunkt verliert der Wert für `opacity` seinen Einfluss, und der Wert für `finishopacity` dominiert. Den Anfangspunkt bestimmen Sie durch `startx` und `starty`, den Endpunkt durch `finishx` und `finishy`.
2 bedeutet: radialer (elliptischer) Verlauf von innen nach außen. Ganz innen gilt der angegebene Wert für `opacity`, ganz außen der angegebene Wert für `finishopacity`. In diesem Fall können Sie Angaben zu `startx`, `starty`, `finishx` und `finishy` weglassen, so wie im obigen Beispiel.
3 bedeutet: rechteckiger Verlauf von innen nach außen. Ganz innen gilt der angegebene Wert für `opacity`, ganz außen der angegebene Wert für `finishopacity`. In diesem Fall können Sie Angaben zu `startx`, `starty`, `finishx` und `finishy` weglassen, so wie im obigen Beispiel.

`startx` steht für den Anfangspunkt vom linken Rand aus gesehen in Prozent relativ zur Breite des Elements. Nur in Verbindung mit `style=1` von Bedeutung.

`starty` steht für den Anfangspunkt vom oberen Rand aus gesehen in Prozent relativ zur Höhe des Elements. Nur in Verbindung mit `style=1` von Bedeutung.

`finishx` steht für den Endpunkt vom linken Rand aus gesehen in Prozent relativ zur Breite des Elements. Nur in Verbindung mit `style=1` von Bedeutung.

`finishy` steht für den Endpunkt vom oberen Rand aus gesehen in Prozent relativ zur Höhe des Elements. Nur in Verbindung mit `style=1` von Bedeutung.

## filter:Blur() (Verwisch-Effekt)

Dieser Filter erlaubt es, Grafiken in HTML mit Verwisch-Effekt auszustatten.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:Blur()</title>
    </head><body>

    <p>links das Bild in seiner normalen Form, rechts mit Blur()-Filter:</p>

    <p><img src="filter_blur.jpg" width="91" height="177" alt="Bild">
    <img src="filter_blur.jpg" width="91" height="177" alt="Bild"
              style="filter:Blur(direction=45, strength=40)"></p>

    <p style="width:100%; padding:20px; font-size:56px; color:red;
      filter:Blur(direction=235, strength=6)">Text mit Blur-Effekt</p>

    </body></html>

### Erläuterung:

Mit `filter:Blur()` können Sie einen Verwisch-Effekt definieren. Geeignet ist der Filter für Grafiken. Dieser Filter erwartet folgende Parameter:

Den Parameter `add` brauchen Sie nur anzugeben, wenn Sie `add=0` notieren wollen. Dann erscheinen die Konturen der Grafik gar nicht mehr, und am Bildschirm erscheint nur noch die Verwischspur. Der Effekt wird dadurch sehr stark, die eigentliche Grafik ist oft nicht mehr zu erkennen.

`direction` steht für die Richtung, in die die Verwischspur führt. Es wirkt dann so, als ob die Grafik aus dieser Richtung kommt. Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270, 315:
0 bedeutet: Die Verwischspur zeigt nach oben.
45 bedeutet: Die Verwischspur zeigt nach oben rechts.
90 bedeutet: Die Verwischspur zeigt nach rechts.
135 bedeutet: Die Verwischspur zeigt nach unten rechts.
180 bedeutet: Die Verwischspur zeigt nach unten.
225 bedeutet: Die Verwischspur zeigt nach unten links.
270 bedeutet: Die Verwischspur zeigt nach links.
315 bedeutet: Die Verwischspur zeigt nach oben links.

`strength` steht für die Stärke des Verwisch-Effektes. 0 bedeutet keinen Verwisch-Effekt, jeder höhere Wert die Verwischspur in Pixeln. Beachten Sie jedoch, dass die Grafik innerhalb ihrer normalen Bildgröße dargestellt wird. Verwischspuren von Konturen, die sehr nah am Bildrand sind, werden nur bis zum Bildrand gezogen.

## filter:Chroma() (Transparenzfarbe)

Mit diesem Filter können Sie bei Grafiken eine Farbe als transparent definieren. Anders als bei transparenten GIF-Grafiken werden jedoch auch alle anderen Farben der Grafik betroffen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:Chroma()</title>
    </head><body>

    <p>links das Bild in seiner normalen Form, rechts mit Chroma()-Filter:</p>

    <p><img src="filter_chroma.gif" width="106" height="109" alt="Bild">
    <img src="filter_chroma.gif" style="filter:Chroma(color=#DDBB99)" width="106" height="109" alt="Bild"></p>

    </body></html>

### Erläuterung:

Mit `filter:Chroma()` können Sie eine Farbe in einer Grafik als transparent definieren. Der Filter erwartet folgenden Parameter:

`color` steht für eine Farbangabe.

## filter:DropShadow() (Schattenwurf)

Dieser Filter bewirkt einen Schatteneffekt für alle Konturen eines Elements. Bei Text bilden die Zeichen die Konturen, bei Grafiken sollten Sie nur solche für den Filter benutzen, die eindeutige Konturen haben, z.B. Cliparts.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:DropShadow()</title>
    </head><body>

    <div style="width:100%; font-size:85px; color:blue; filter:DropShadow(color=#C0C0C0, offx=3, offy=3)">
    Text mit Schattenwurf</div>

    </body></html>

### Erläuterung:

Mit `filter:DropShadow()` können Sie einen Schattenwurf erzwingen. Der Filter erwartet folgende Parameter:

`color` steht für die Farbe, die als Schatten definiert werden soll (siehe Farbangaben).

`offx` steht für die Anzahl an horizontalen Pixel für den Schatteneffekt. Positive Zahlen bewirken einen Schatteneffekt rechts, negative einen Schatteneffekt links.

`offy` steht für die Anzahl an vertikalen Pixel für den Schatteneffekt. Positive Zahlen bewirken einen Schatteneffekt unten, negative mit Minuszeichen davor einen Schatteneffekt oben.

Den Parameter `positive` sollten Sie nur angeben, wenn Sie nur für die transparenten Pixel einer Grafik (siehe transparente GIF-Grafiken) einen Schatteneffekt erzwingen wollen. Dazu sollte dieser Parameter den Wert 1 erhalten.

### Beachten Sie:

Für verlaufende Schatten können Sie den Filter für filter:Shadow() verwenden.

## filter:FlipH() (Horizontal spiegeln)

Mit diesem Filter können Sie eine Grafik horizontal spiegelverkehrt anzeigen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:FlipH()</title>
    </head><body>

    <p>Links die normale Grafik, rechts mit FlipH()-Filter:</p>

    <p><img src="filter_flip.jpg" width="200" height="140" alt="Bild">
    <img src="filter_flip.jpg" style="filter:FlipH()" width="200" height="140" alt="Bild"></p>

    </body></html>

### Erläuterung:

Mit `filter:FlipH()` bewirken Sie die horizontale Spiegelung. Geeignet ist der Filter für Grafiken in HTML. Dieser Filter erwartet keine Parameter.

## filter:FlipV() (Vertikal spiegeln)

Mit diesem Filter können Sie eine Grafik vertikal spiegelverkehrt anzeigen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:FlipV()</title>
    </head><body>

    <p>Links die normale Grafik, rechts mit FlipV()-Filter:</p>

    <p><img src="filter_flip.jpg" width="200" height="140" alt="Bild">
    <img src="filter_flip.jpg" style="filter:FlipV()" width="200" height="140" alt="Bild"></p>

    </body></html>

### Erläuterung:

Mit `filter:FlipV()` bewirken Sie die vertikale Spiegelung. Geeignet ist der Filter für Grafiken in HTML. Dieser Filter erwartet keine Parameter.

## filter:Glow() (Glühender Rand)

Dieser Filter bewirkt einen "Heiligenschein" um ein Text- oder Grafikobjekt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:Glow()</title>
    </head><body>

    <div style="width:100%; font-size:85px; color:#9999CC;
        filter:Glow(color=#000000, strength=12)">Gl&uuml;hender Text</div>

    </body></html>

### Erläuterung:

Mit `filter:Glow()` können Sie einen glühenden Rand definieren. Dieser Filter erwartet folgende Parameter:

`color` steht für die Farbe, die als Glühfarbe definiert werden soll (siehe Farbangaben).

`strength` steht für die Stärke der Wirkung. Erlaubt sind Werte zwischen 1 und 255, praxisgerecht sind aber in den meisten Fällen nur Werte zwischen 1 und etwa 20.

## filter:Gray() (Graustufen)

Dieser Filter entfernt alle Farbinformationen aus einem Element oder einer Grafik und wandelt sie stattdessen in Graustufen um.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:Gray()</title>
    </head><body>

    <p>Links die normale Grafik, rechts mit Gray()-Filter:</p>

    <p><img src="filter_gray.jpg" width="200" height="240" alt="Bild">
    <img src="filter_gray.jpg" style="filter:Gray()" width="200" height="240" alt="Bild"></p>

    </body></html>

### Erläuterung:

Mit `filter:Gray()` können Sie Graustufen erzwingen. Geeignet ist der Filter besonders für Grafiken. Dieser Filter erwartet keine Parameter.

## filter:Invert() (Invertieren)

Dieser Filter invertiert farbige Elemente und Grafiken. Alle Farben werden bei der Anzeige in ihre Komplementärfarben verwandelt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:Invert()</title>
    </head><body>

    <p>Links die normale Grafik, rechts mit Invert()-Filter:</p>

    <p><img src="filter_invert.jpg" width="200" height="200" alt="Bild">
    <img src="filter_invert.jpg" style="filter:Invert()" width="200" height="200" alt="Bild"></p>

    </body></html>

### Erläuterung:

Mit `filter:Invert()` können Sie invertieren. Geeignet ist der Filter besonders für Grafiken. Dieser Filter erwartet keine Parameter.

## filter:Mask() (Transparenzmaske)

Dieser Filter ist für transparente GIF-Grafiken gedacht. Er ersetzt alle transparenten Pixel der Grafik durch eine gewünschte Farbe und stattdessen alle nicht-transparenten Pixel der Grafik durch die Farbe, die in der Grafik als transparent definiert ist.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:Mask()</title>
    </head><body>

    <p>Links die normale Grafik, rechts mit Mask()-Filter:</p>

    <p><img src="filter_mask.gif" width="100" height="94" alt="Bild">
    <img src="filter_mask.gif" style="filter:Mask(color=#000066)" width="100" height="94" alt="Bild"></p>

    </body></html>

### Erläuterung:

Mit `filter:Mask()` können Sie für eine transparente GIF-Grafik eine Transparenzmaske definieren. Der Filter erwartet folgenden Parameter:

`color` steht für eine Farbangabe.

## filter:Shadow() (Schatten)

Dieser Filter bewirkt einen Verlaufsschatten um die Konturen eines Elements.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:Shadow()</title>
    </head><body>

    <div style="width:100%; font-size:64px; color:magenta; filter:Shadow(color=#000000, direction=45)">
    Text mit Schatten</div>

    </body></html>

### Erläuterung:

Mit `filter:Shadow()` können Sie einen Schatten erzeugen. Dieser Filter erwartet folgende Parameter:

`color` steht für eine Schattenfarbe (siehe Farbangaben).

`direction` steht für die Richtung, in die der Schatteneffekt führt. Erlaubt sind die Werte 0, 45, 90, 135, 180, 225, 270, 315:
0 bedeutet: Der Schatteneffekt zeigt nach oben.
45 bedeutet: Der Schatteneffekt zeigt nach oben rechts.
90 bedeutet: Der Schatteneffekt zeigt nach rechts.
135 bedeutet: Der Schatteneffekt zeigt nach unten rechts.
180 bedeutet: Der Schatteneffekt zeigt nach unten.
225 bedeutet: Der Schatteneffekt zeigt nach unten links.
270 bedeutet: Der Schatteneffekt zeigt nach links.
315 bedeutet: Der Schatteneffekt zeigt nach oben links.

## filter:Wave() (Wellenartige Störung)

Dieser Filter bewirkt eine wellenförmige Verzerrung des betroffenen Text- oder Grafikobjekts.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:Wave()</title>
    </head><body>

    <div style="width:100%; font-size:123px; font-weight:900; color:#FFCCFF;
     filter:Wave(freq=5, lightstrength=20, phase=50, strength=6) Shadow(color=#808080, direction=135);">
     Wave-Text</div>

    </body></html>

### Erläuterung:

Mit `filter:Wave()` können Sie eine wellenartige Verzerrung definieren. Dieser Filter erwartet folgende Parameter:

`freq` steht für die Wellenfrequenz. Je höher der Wert, desto kleiner die Wellen, je niedriger, desto größer die einzelnen Wellen. Praxisnah sind etwa Werte zwischen 5 und 50.

`lightstrength` steht für die Stärke des Lichts im Welleneffekt in Prozent. Werte zwischen 0 und 100.

`phase` steht für den Beginn der Sinus-Wellenphase in Prozent. Werte zwischen 0 und 100. Bei 0 beginnt der Welleneffekt normal, bei 25 etwa beginnt er bei 90°.

`strength` steht für die Stärke des gesamten Effekts. Praxisnah sind z.B. Werte zwischen 1 und 10.

`add` steht für die Anzeige der Originalgrafik. `add=1` bewirkt, dass die Originalgrafik zu der verzerrten Grafik hinzugefügt wird. Bei `add=0` wird die Originalgrafik nicht hinzugefügt.

## filter:XRay() (Fotonegativ-Effekt)

Dieser Filter konvertiert alle Farben eines Elements oder einer Grafik in Graustufen und bewirkt einen Effekt wie ein Fotonegativ.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>filter:XRay()</title>
    </head><body>

    <p>Links die normale Grafik, rechts mit XRay()-Filter:</p>

    <p><img src="filter_x_ray.jpg" width="276" height="189" alt="">
    <img src="filter_x_ray.jpg" style="filter:XRay()" width="276" height="189" alt=""></p>

    </body></html>

### Erläuterung:

Mit `filter:XRay()` können Sie den Fotonegativ-Effekt erzwingen. Dieser Filter erwartet keine Parameter.

| Einführung in CSS-basierte Layouts
| Anzeigefenster

© 2007 Impressum