CSS-Tutorial (7) Filter

CSS bietet einige integrierte Multimedia-Filtereffekte. Mithilfe dieser Technologie können Sie einem Standard-HTML-Element wie Bildern, Textcontainern und anderen Objekten visuelle Filter und Transformationseffekte hinzufügen. Dreamweaver4 bietet 16 Filter zur Auswahl, wie unten gezeigt:

Als Nächstes schauen wir uns an, wie Sie diese CSS-Filter bequem in Dreamweaver4 verwenden können.

Erstellen Sie einen benutzerdefinierten Stil „.filter“, wählen Sie den Alpha-Filter im Dropdown-Feld „Filter“ aus, wir werden „Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY=“ verwenden ? , FinishX=?, FinishY=?)“ setzen Sie den Parameter „Deckkraft“ auf 50 und löschen Sie alle nachfolgenden Parameter, wie unten gezeigt:

Nach dem Drücken von „OK“ wird ein benutzerdefinierter Stil „.filter“ erstellt. Wir Wenden Sie diesen Stil auf ein Bild an und das Bild wird halbtransparent. Wenn Sie diesen Stil auf eine Tabelle anwenden, wird die Tabelle ebenfalls halbtransparent. Beachten Sie, dass alle Filtereffekte nur im Browser sichtbar sind. Das Folgende ist der Originalcode:



Hinweis: In diesem Beispiel haben wir nicht die folgenden Parameter verwendet, sondern nur den Parameter „Deckkraft“. Andere Parameter löschen.

Lassen Sie uns die Effekte und Parameter jedes Filters erklären:

1. Alpha: Transparenz festlegen

Alpha(Opacity=?, FinishOpacity=?, style=? , StartX= ?, StartY=?, FinishX=?, FinishY=?)

Deckkraft: Transparenzstufe, Bereich ist 0-100, 0 steht für völlig transparent, 100 steht für völlig undurchsichtig.

FinishOpacity: Beim Festlegen des Transparenzeffekts des Farbverlaufs wird damit die Transparenz am Ende angegeben. Der Bereich liegt ebenfalls zwischen 0 und 100.

Stil: Legen Sie den Stil der Verlaufstransparenz fest. Ein Wert von 0 steht für eine gleichmäßige Form, 1 für eine lineare Form, 2 für eine radiale Form und 3 für ein Rechteck.

StartX und StartY: stellen die Start-X- und Y-Koordinaten des Verlaufstransparenzeffekts dar.

FinishX und FinishY: stellen die X- und Y-Koordinaten des Endes des Verlaufstransparenzeffekts dar.

2. BlendTrans: Ein- und Ausblendeffekt zwischen Bildern

BlendTrans(Dauer=?)

Dauer: Ein- oder Ausblendzeit.

Hinweis: Dieser Filter muss mit JS verwendet werden, um eine Bildsequenz zu erstellen, um Effekte zwischen Bildern zu erzeugen.

3. Unschärfe: Einen Unschärfeeffekt erzeugen

Unschärfe(Hinzufügen=?, Richtung=?, Stärke=?)

Hinzufügen: Ob in eine Richtung verwischt werden soll Parameter ist ein boolescher Wert, wahr (nicht 0) oder falsch (0).

Richtung: Legen Sie die Richtung der Unschärfe fest, wobei 0 Grad vertikal nach oben steht und alle 45 Grad eine Einheit darstellen.

Stärke: stellt den unscharfen Pixelwert dar.

4. Chroma: Setzt die angegebene Farbe auf transparent

Chroma(Color=?)

Farbe: bezieht sich auf die Farbe, die als transparent eingestellt werden soll.

5. DropShadow: Erstellen Sie einen Schatteneffekt

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Farbe: Geben Sie die Farbe an der Schatten.

OffX: Gibt den horizontalen Versatz des Schattens relativ zum Element an, eine Ganzzahl.

OffY: Gibt den vertikalen Versatz des Schattens relativ zum Element an, eine ganze Zahl.

Positiv: Es handelt sich um einen booleschen Wert. Wenn der Wert wahr (nicht 0) ist, bedeutet dies, dass er einen äußeren Schatten erzeugt.

6. FlipH: Drehen Sie das Element horizontal

7. FlipV: Drehen Sie das Element vertikal

8 (Farbe=?, Stärke=?)

Farbe: Gibt die Farbe des Lichts an. Stärke: Die Intensität des Lichts, die eine beliebige ganze Zahl zwischen 1 und 255 sein kann. Je größer die Zahl, desto größer die Reichweite des Lichts.

9. Grau: Die Farbe des Bildes entfernen und als Schwarzweißbild anzeigen

10. Invertieren: Die Farbe des Bildes umkehren, um einen filmähnlichen Effekt zu erzeugen

11. Licht: Der Effekt der Platzierung einer Lichtquelle, der verwendet werden kann, um den Projektionseffekt einer Lichtquelle auf ein Objekt zu simulieren

Hinweis: Für diesen Effekt muss JS die Position und Intensität festlegen des Lichtes.

12. Maske: Erstellen Sie eine transparente Maske

Maske (Farbe=?)

Farbe: Legen Sie die Hintergrundfarbe fest, um den Teil des Objekts, der den Hintergrund bedeckt, transparent zu machen.

13. RevealTrans: Umschalteffekt erstellen

RevealTrans(Duration=?, Transition=?)

Dauer: ist die Umschaltzeit in Sekunden.

Übergang: Dies ist die Umschaltmethode und kann von 0 bis 23 eingestellt werden.

Hinweis: Wenn Sie zwischen Seiten wechseln möchten, können Sie im Bereich eine Codezeile hinzufügen: . Wenn die Elemente auf der Seite verwendet werden, müssen sie mit JS verwendet werden.

14. Schatten: Einen weiteren Schatteneffekt erstellen

Schatten (Farbe=?, Richtung=?)

Farbe: bezieht sich auf die Farbe des Schattens.

Richtung: Legt die Richtung der Projektion fest. 0 Grad bedeutet vertikal nach oben, und alle 45 Grad sind eine Einheit.

15. Welle: Welleneffekt

Welle(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add: Gibt an, ob Zeigt das Originalobjekt an. 0 bedeutet, dass es nicht angezeigt wird, und nicht 0 bedeutet, dass das Originalobjekt angezeigt wird.

Häufigkeit: Stellen Sie die Anzahl der Schwankungen ein.

Lichtstärke: Stellen Sie die Lichtintensität des Welleneffekts von 0 bis 100 ein. 0 bedeutet die schwächste und 100 die stärkste.

Phase: Der anfängliche Phasenwinkel der Welle. Prozentwert von 0 bis 100. (Zum Beispiel: 25 entspricht 90 Grad, während 50 180 Grad entspricht.)

Stärke: Stellen Sie die Amplitude des Wellenschwungs ein.

16. Röntgen: Umrisse des Bildes anzeigen, Röntgeneffekt

Hinweis: Bei der Verwendung von CSS-Filtern müssen Sie Elemente mit Bereichen wie Tabellen, Bilder usw. verwenden. Elemente ohne Bereiche wie Text und Absätze können keine CSS-Filter verwenden. Für solche Elemente können wir die Stile „Höhe“ und „Breite“ oder die Koordinaten der Elemente festlegen, um dies zu erreichen.

Sehen Sie sich das Beispiel unten an. Wir erstellen einen Schlagschatteneffekt (dropshadow) auf einer Textzeile, erstellen einen neuen benutzerdefinierten style.shadow und wählen „DropShadow(Color=?, OffX=?, OffY=?“). ,) im Filter-Dropdown-Feld. Wir setzen es auf „DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)“. Wenn wir dann den definierten Stil auf die Seite anwenden, stellen wir fest, dass der Text in der Tabelle einen Schatten hat, der Text im Absatz jedoch keinen Schatten. Klicken Sie im Bedienfeld „CSS-Stile“ auf die Schaltfläche „Stylesheet bearbeiten“ und fügen Sie dem Stil das Attribut „Höhe“ hinzu:

Um die Höhe des Originalobjekts nicht zu beeinträchtigen, darf die von uns festgelegte Höhe die Höhe der Schriftart selbst nicht überschreiten . Nach OK sehen Sie im Browser, dass auch der Text im Absatz einen Schatten hat.

Das obige ist der detaillierte Inhalt vonCSS-Tutorial (7) Filter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!