CSS-Filter - Text- und Bildeffekte
Sie können CSS-Filter verwenden, um Text, Bildern und anderen Aspekten einer Webseite Spezialeffekte hinzuzufügen, ohne Bilder oder andere Grafiken zu verwenden. Filters only work on Internet Explorer 4.0. Wenn Sie Ihre Website für mehrere Browser entwickeln, ist es möglicherweise keine gute Idee, CSS-Filter zu verwenden, da die Möglichkeit besteht, dass dies keinen Vorteil bringt.
In diesem Kapitel sehen wir die Details der einzelnen CSS-Filter. Diese Filter funktionieren möglicherweise nicht in Ihrem Browser.
Alpha-Kanal
Der Alpha-Kanal-Filter ändert die Deckkraft des Objekts, sodass es in den Hintergrund übergeht. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | opacity Stufe der Deckkraft. 0 ist vollständig transparent, 100 ist vollständig undurchsichtig. |
| 2 | finishopacity Stufe der Deckkraft am anderen Ende des Objekts. |
| 3 | style Die Form des Opazitätsgradienten. 0 = einheitlich 1 = linear 2 = radial 3 = rechteckig |
| 4 | startX X-Koordinate für den Beginn des Opazitätsgradienten. |
| 5 | startY Y-Koordinate für den Beginn des Opazitätsgradienten. |
| 6 | finishX X-Koordinate für das Ende des Opazitätsgradienten. |
| 7 | finishY Y-Koordinate für das Ende des Opazitätsgradienten. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Alpha(Opacity=100,
FinishOpacity = 0,
Style = 2,
StartX = 20,
StartY = 40,
FinishX = 0,
FinishY = 0)" />
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Bewegungsunschärfe
Bewegungsunschärfe wird verwendet, um unscharfe Bilder oder Texte mit der Richtung und Stärke zu erstellen. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | add Richtig oder falsch. Wenn true, wird das Bild dem unscharfen Bild hinzugefügt. und wenn falsch, wird das Bild nicht zu dem unscharfen Bild hinzugefügt. |
| 2 | direction Die Richtung der Unschärfe im Uhrzeigersinn ist auf 45-Grad-Schritte gerundet. Der Standardwert ist 270 (links). 0 = Oben 45 = Oben rechts 90 = Richtig 135 = unten rechts 180 = unten 225 = unten links 270 = Links 315 = Oben links |
| 3 | strength Die Anzahl der Pixel, die die Unschärfe vergrößert. Der Standardwert beträgt 5 Pixel. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png" alt = "CSS Logo"
style = "Filter: Blur(Add = 0, Direction = 225, Strength = 10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: blue;
Filter: Blur(Add = 1, Direction = 225, Strength = 10)">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Chroma Filter
Der Chroma-Filter wird verwendet, um eine bestimmte Farbe transparent zu machen, und normalerweise wird er für Bilder verwendet. Sie können es auch mit Bildlaufleisten verwenden. Der folgende Parameter kann in diesem Filter verwendet werden -
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe, die Sie transparent sein möchten. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/images/css.gif"
alt = "CSS Logo" style = "Filter: Chroma(Color = #FFFFFF)">
<p>Text Example:</p>
<div style = "width: 580;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: #3300FF;
Filter: Chroma(Color = #3300FF)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Schlagschatteneffekt
Schlagschatten wird verwendet, um einen Schatten Ihres Objekts mit dem angegebenen X (horizontal) und Y (vertikal) Versatz und der angegebenen Farbe zu erstellen.
Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe des Dropshadows im Format #RRGGBB. |
| 2 | offX Anzahl der Pixel, um die der Schlagschatten entlang der x-Achse vom visuellen Objekt versetzt ist. Positive Ganzzahlen verschieben den Schlagschatten nach rechts, negative Ganzzahlen verschieben den Schlagschatten nach links. |
| 3 | offY Anzahl der Pixel, um die der Schlagschatten entlang der y-Achse vom visuellen Objekt versetzt ist. Positive Ganzzahlen verschieben den Schlagschatten nach unten, negative Ganzzahlen verschieben den Schlagschatten nach oben. |
| 4 | positive Wenn true, haben alle undurchsichtigen Pixel des Objekts einen Dropshadow. Wenn false, haben alle transparenten Pixel einen Dropshadow. Der Standardwert ist true. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter:drop-shadow(2px 2px 1px #FF0000);">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter:drop-shadow(3px 3px 2px #000000);">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Flip-Effekt
Der Flip-Effekt wird verwendet, um ein Spiegelbild des Objekts zu erstellen. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | FlipH Erstellt ein horizontales Spiegelbild |
| 2 | FlipV Erstellt ein vertikales Spiegelbild |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: FlipH">
<img src = "/css/images/logo.png" alt = "CSS Logo" style = "filter: FlipV">
<p>Text Example:</p>
<div style = "width: 300;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: FlipV">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Glow-Effekt
Der Glow-Effekt wird verwendet, um ein Glühen um das Objekt zu erzeugen. Wenn es sich um ein transparentes Bild handelt, wird um die undurchsichtigen Pixel herum ein Glühen erzeugt. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe, die das Leuchten haben soll. |
| 2 | strength Die Intensität des Glühens (von 1 bis 255). |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Glow(Color=#00FF00, Strength=20)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Glow(Color=#00FF00, Strength=20)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Graustufeneffekt
Der Graustufeneffekt wird verwendet, um die Farben des Objekts in 256 Graustufen umzuwandeln. Der folgende Parameter wird in diesem Filter verwendet -
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | grayscale Konvertiert die Farben des Objekts in 256 Graustufen. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: grayscale(50%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: grayscale(50%)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Effekt umkehren
Der Invertierungseffekt wird verwendet, um die Farben des Objekts auf ihre entgegengesetzten Werte im Farbspektrum abzubilden, dh um ein negatives Bild zu erstellen. Der folgende Parameter wird in diesem Filter verwendet -
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | Invert Ordnet die Farben des Objekts ihrem entgegengesetzten Wert im Farbspektrum zu. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: invert(100%)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: invert(100%)">CSS Tutorials</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Maskeneffekt
Der Maskeneffekt wird verwendet, um transparente Pixel in eine bestimmte Farbe zu bringen und undurchsichtige Pixel transparent zu machen. Der folgende Parameter wird in diesem Filter verwendet -
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe, zu der die transparenten Bereiche werden. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Mask(Color=#00FF00)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Mask(Color=#00FF00)">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Schattenfilter
Der Schattenfilter wird verwendet, um einen gedämpften Schatten in der angegebenen Richtung und Farbe zu erzeugen. Dies ist ein Filter, der zwischen Dropshadow und Glow liegt. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | color Die Farbe, die der Schatten haben soll. |
| 2 | direction Die Richtung der Unschärfe im Uhrzeigersinn ist auf 45-Grad-Schritte gerundet. Der Standardwert ist 270 (links). 0 = Oben 45 = Oben rechts 90 = Richtig 135 = unten rechts 180 = unten 225 = unten links 270 = Links 315 = Oben links |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family:
Arial Black;
color: red;
filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Welleneffekt
Der Welleneffekt wird verwendet, um dem Objekt eine Sinuswellenverzerrung zu verleihen, damit es wellig aussieht. Die folgenden Parameter können in diesem Filter verwendet werden:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | add Bei einem Wert von 1 wird das Originalbild zum Wellenbild hinzugefügt, bei 0 nicht. |
| 2 | freq Die Anzahl der Wellen. |
| 3 | light Die Stärke des Lichts auf der Welle (von 0 bis 100). |
| 4 | phase Ab welchem Grad sollte die Sinuswelle beginnen (von 0 bis 100). |
| 5 | strength Die Intensität des Welleneffekts. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Chroma(Color = #000000)
Wave(Add=0, Freq=1, LightStrength=10, Phase=220, Strength=10)">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Wave(Add=0, Freq=1, LightStrength=10, Phase=20, Strength=20)">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -
Röntgeneffekt
Röntgeneffekt Graustufen und glättet die Farbtiefe. Der folgende Parameter wird in diesem Filter verwendet:
| Sr.Nr. | Parameter & Beschreibung |
|---|---|
| 1 | xray Graustufen und glättet die Farbtiefe. |
Beispiel
<html>
<head>
</head>
<body>
<p>Image Example:</p>
<img src = "/css/images/logo.png"
alt = "CSS Logo"
style = "filter: Xray">
<p>Text Example:</p>
<div style = "width: 357;
height: 50;
font-size: 30pt;
font-family: Arial Black;
color: red;
filter: Xray">CSS Tutorials
</div>
</body>
</html>Es wird das folgende Ergebnis erzeugt -