SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

| ## Style-Sheet-Angaben: Cursor und Microsoft-Spezialfilter
| Allgemeines zu Cursor und den Microsoft-Spezialfiltern Cursor (cursor) Microsoft-Spezialfilter (filter) Vordergrund/Hintergrund verschmelzen filter:Alpha() Verwisch-Effekt filter:Blur() Transparenzfarbe filter:Chroma() Schattenwurf filter:DropShadow() Horizontal spiegeln: filter:FlipH() Vertikal spiegeln: filter:FlipV() Glühender Rand filter:Glow() Graustufen filter:Gray() Invertieren filter:Invert() Transparenzmaske filter:Mask() Schatten filter:Shadow() Wellenartige Störung filter:Wave() Foto-Negativ-Effekt filter:XRay()

## Allgemeines zu Cursorn und Microsoft-Spezialangaben

Die hier vorgestellten Style-Sheet-Befehle sind vor allem in Verbindung mit Scriptsprachen wie JavaScript interessant. Das bedeutet letztendlich, daß es Befehle sind, die in den Bereich von Dynamischem HTML fallen.

Die Angabe zum Aussehen des Cursors gehört zum Sprachumfang der CSS-2.0-Spezifikation. Die übrigen Möglichkeiten sind jedoch Eigenentwicklungen von Microsoft. Der MS Internet Explorer 4.x beherrscht den Filter-Befehl und die hier beschriebenen Filter. Mit Hilfe dieser Filter können Sie auf WWW-Seiten faszinierende Effekte erzeugen - ein Eldorado für Web-Designer und Homepage-Bastler, die stets auf der Suche nach neuen visuellen Möglichkeiten sind.

## Cursor (cursor)

Anzeigebeispiel: So sieht's aus

Sie können für ein HTML-Element einen Cursor definieren. Wenn der Anwender mit der Maus über die Fläche fährt, die das Element einnimmt, nimmt der Mauscursor die angegebene Gestalt an. Da Mauscursor immer mit einer Bedeutung versehen sein sollten, ist es in der Praxis sinnvoll, solche Elemente etwa mit Hilfe von JavaScript Event-Handlern an ein Script zu binden, daß bestimmte Befehle ausführt.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="cursor:hand; color:blue" onClick="window.location.href='datei2.htm'">Verweis, der nicht unterstrichen ist</p>

### Erläuterung:

Mit `cursor:` können Sie das Aussehen des Mauscursors für den Fall definieren, daß der Anwender mit der Maus über den entsprechenden Bereich fährt. Folgende Angaben sind erlaubt:

`auto` = automatischer Cursor (Normaleinstellung).
`default` = Plattformunabhängiger Standard-Cursor.
`crosshair` = Cursor in Form eines einfachen Fadankreuzes.
`pointer` = Cursor in Form eines Zeigers.
`move` = Cursor in Form eines Kreuzes, das die Fähigkeit zum Bewegen des Elements signalisiert.
`n-resize` = Cursor in Form Pfeils, der nach oben zeigt (n = Norden).
`ne-resize` = Cursor in Form Pfeils, der nach rechts oben zeigt (ne = Nordost).
`e-resize` = Cursor in Form Pfeils, der nach rechts zeigt (e = Osten).
`se-resize` = Cursor in Form Pfeils, der nach rechts unten zeigt (se = Südost).
`s-resize` = Cursor in Form Pfeils, der nach unten zeigt (s = Süden).
`sw-resize` = Cursor in Form Pfeils, der nach links unten zeigt (sw = Südwest).
`w-resize` = Cursor in Form Pfeils, der nach links zeigt (w = Westen).
`nw-resize` = Cursor in Form Pfeils, der nach links oben zeigt (nw = Nordwest).
`text` = Cursor in einer Form, die normalen Text symbolisiert.
`wait` = Cursor in Form eines Symbols, das einen Wartezustand signalisiert.
`help` = Cursor in Form Symbols, das Hilfe zu dem Element signalisiert.
`url([Datei])` = Beliebiger Cursor, [Datei] sollte eine GIF- oder JPG-Grafik sein.

### Beachten Sie:

Cursor-Symbole sollten Sie nicht zweckentfremden. Wenn Sie beispielsweise `cursor:move` für ein Element benutzen, sollte dieses Element auch tatsächlich beweglich sein (etwa mit Hilfe von Dynamischem HTML), und wenn Sie `cursor:help` benutzen, erwartet der Anwender beim Anklicken des Bereichs, daß am Bildschirm ein Fenster oder ein Bereich mit einem Hilfetext erscheint.

## Microsoft-Spezialfilter (filter)

Sie können für einzelne Elemente Filter angeben, die das Element dynamisch verändern. So läßt sich beispielsweise ein Bild langsam einblenden, oder ein Text zerbröckelt langsam.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <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. 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 Style-Sheet-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-Tags 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 Style-Sheet-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 Style-Sheet-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. Deshalb werden diese Filter im Abschnitt über Dynamic HTML auf der Seite Dynamische Filter beschrieben.

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

Anzeigebeispiel: So sieht's aus

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 (Style-Sheet-Definition für HTML-Tag im Text):

    <p style="background-image:url(back.jpg); padding:10pt;" align=center>
    <img src="xdance1.gif" style="filter:Alpha(opacity=100, finishopacity=0, style=2)"
    width=247 height=383>
    </p>

### Erläuterung:

Mit `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=`
Deckgrad am Urpsrung 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=`
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=`
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 Einfluß, 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=`
Anfangspunkt in Pixel horizontal vom linken Rand des Vordergrundelements. Nur in Verbindung mit `style=1` von Bedeutung.

`starty=`
Anfangspunkt in Pixel vertikal vom oberen Rand des Vordergrundelements. Nur in Verbindung mit `style=1` von Bedeutung.

`finishx=`
Endpunkt in Pixel horizontal vom linken Rand des Vordergrundelements. Nur in Verbindung mit `style=1` von Bedeutung.

`finishy=`
Endpunkt in Pixel vertikal vom oberen Rand des Vordergrundelements. Nur in Verbindung mit `style=1` von Bedeutung.

## Verwisch-Effekt - filter:Blur()

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <img src="grafik.jpg" style="filter:Blur(direction=45, strength=30)">

### Erläuterung:

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

`add=`
Diesen Parameter 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=`
Mit diesem Parameter geben Sie die Richtung an, 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=`
Mit diesem Parameter bestimmen Sie, wie stark der Verwisch-Effekt sein soll. 0 bedeutet keinen Verwisch-Effekt, jeder höhere Wert die Verwischspur in Pixeln. Beachten Sie jedoch, daß die Grafik innerhalb ihrer normalen Bildgröße dargestellt wird. Verwischspuren von Konturen, die sehr nah am Bildrand sind, werden nur bis zum Bildrand gezogen.

## Transparenzfarbe - filter:Chroma()

Anzeigebeispiel: So sieht's aus

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 (Style-Sheet-Definition für HTML-Tag im Text):

    <img src="grafik.gif" style="filter:Chroma(color=#FFFFCC)">

### Erläuterung:

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

`color=`
Eine HTML-gerechte Hexadezimalangabe der Farbe, die als transparent definiert werden soll (siehe Farben definieren in HTML).

## Schattenwurf - filter:DropShadow()

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

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

### Erläuterung:

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

`color=`
Eine HTML-gerechte Hexadezimalangabe der Farbe, die als Schatten definiert werden soll (siehe Farben definieren in HTML).

`offx=`
Anzahl für den Schatteneffekt horizontal in Pixeln. Positive Zahlen bewirken einen Schatteneffekt rechts, negative mit Minuszeichen davor einen Schatteneffekt links.

`offy=`
Anzahl für den Schatteneffekt vertikal in Pixeln. Positive Zahlen bewirken einen Schatteneffekt unten, negative mit Minuszeichen davor einen Schatteneffekt oben.

`positive=`
Diesen Parameter sollten Sie nur angeben, wenn Sie nur für die transparenten Pixel einer Grafik (siehe transparenten 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 Schatten - filter:Shadow() verwenden.

## Horizontal spiegeln - filter:FlipH()

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <img src="grafik.gif" style="filter:FlipH()">

### Erläuterung:

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

## Horizontal spiegeln - filter:FlipV()

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <img src="grafik.gif" style="filter:FlipV()">

### Erläuterung:

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

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

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="width:100%; font-size:100pt; color:000000;
    filter:Glow(color=#0000FF, strength=10)">Text</div>

### Erläuterung:

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

`color=`
Eine HTML-gerechte Hexadezimalangabe der Farbe, die als Glühfarbe definiert werden soll (siehe Farben definieren in HTML).

`strength=`
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.

## Graustufen - filter:Gray()

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <img src="grafik.jpg" style="filter:Gray()">

### Erläuterung:

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

## Invertieren filter:Invert()

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <img src="grafik.jpg" style="filter:Invert()">

### Erläuterung:

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

## Transparenzmaske filter:Mask()

Anzeigebeispiel: So sieht's aus

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 (Style-Sheet-Definition für HTML-Tag im Text):

    <img src="grafik.gif" style="filter:Mask(color=#FFFFCC)">

### Erläuterung:

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

`color=`
Eine HTML-gerechte Hexadezimalangabe der Farbe, in der die Pixel erscheinen sollen, die in der GIF-Grafik eigentlich als transparent definiert sind (siehe Farben definieren in HTML).

## Schatten - filter:Shadow()

Anzeigebeispiel: So sieht's aus

Dieser Filter bewirkt einen Verlaufsschatten um die Konturen eines Elements.

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="width:100%; font-size:48pt; color:black;
    filter:Shadow(color=#808080, direction=135)">Text</div>

### Erläuterung:

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

`color=`
Eine HTML-gerechte Hexadezimalangabe der Schattenfarbe (siehe Farben definieren in HTML).

`direction=`
Mit diesem Parameter geben Sie die Richtung an, 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.

## Wellenartige Störung filter:Wave()

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <div style="width:100%; font-size:64pt; color:#FFCCFF;
    filter:Wave(freq=5, light=20, phase=50, strength=6);">Text</div>

### Erläuterung:

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

`freq=`
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.

`light=`
Stärke des Lichts im Welleneffekt in Prozent. Werte zwischen 0 und 100.

`phase=`
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=`
Stärke des gesamten Effekts. Praxisnah sind z.B. Werte zwischen 1 und 10.

`add=`
Wenn der Effekt auf eine Grafik angewendet wird, bewirkt `add=1`, daß die Originalgrafik zu der verzerrten Grafik hinzugefügt wird. Bei `add=0` wird die Originalgrafik nicht hinzugefügt.

## Foto-Negativ-Effekt - filter:XRay()

Anzeigebeispiel: So sieht's aus

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

### Beispiel (Style-Sheet-Definition für HTML-Tag im Text):

    <img src="grafik.jpg" style="filter:XRay()">

### Erläuterung:

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

weiter: | JavaScript in HTML
zurück: | Style-Sheet-Angaben: Sound-Kontrolle für Sprachausgabe

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

© 1998 Stefan Münz, muenz@csi.com