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 -