Filtres CSS - Effets de texte et d'image

Vous pouvez utiliser des filtres CSS pour ajouter des effets spéciaux au texte, aux images et à d'autres aspects d'une page Web sans utiliser d'images ou d'autres graphiques. Filters only work on Internet Explorer 4.0. Si vous développez votre site pour plusieurs navigateurs, alors ce n'est peut-être pas une bonne idée d'utiliser des filtres CSS car il est possible que cela ne donne aucun avantage.

Dans ce chapitre, nous verrons les détails de chaque filtre CSS. Ces filtres peuvent ne pas fonctionner dans votre navigateur.

Canal alpha

Le filtre Alpha Channel modifie l'opacité de l'objet, ce qui le fait se fondre dans l'arrière-plan. Les paramètres suivants peuvent être utilisés dans ce filtre -

N ° Sr. Paramètre et description
1

opacity

Niveau d'opacité. 0 est totalement transparent, 100 est totalement opaque.

2

finishopacity

Niveau d'opacité à l'autre extrémité de l'objet.

3

style

La forme du dégradé d'opacité.

0 = uniforme

1 = linéaire

2 = radial

3 = rectangulaire

4

startX

Coordonnée X pour le début du dégradé d'opacité.

5

startY

Coordonnée Y pour le début du dégradé d'opacité.

6

finishX

Coordonnée X pour le dégradé d'opacité à la fin.

sept

finishY

Coordonnée Y pour la fin du dégradé d'opacité.

Exemple

<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>

Il produira le résultat suivant -

Flou de mouvement

Le flou de mouvement est utilisé pour créer des images ou du texte flous avec la direction et la force. Les paramètres suivants peuvent être utilisés dans ce filtre -

N ° Sr. Paramètre et description
1

add

Vrai ou faux. Si vrai, l'image est ajoutée à l'image floue; et si faux, l'image n'est pas ajoutée à l'image floue.

2

direction

La direction du flou, dans le sens des aiguilles d'une montre, arrondie à des incréments de 45 degrés. La valeur par défaut est 270 (à gauche).

0 = Haut

45 = En haut à droite

90 = Droite

135 = En bas à droite

180 = bas

225 = En bas à gauche

270 = Gauche

315 = En haut à gauche

3

strength

Le nombre de pixels que le flou s'étendra. La valeur par défaut est de 5 pixels.

Exemple

<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>

Il produira le résultat suivant -

Filtre Chroma

Le filtre Chroma est utilisé pour rendre toute couleur particulière transparente et il est généralement utilisé avec des images. Vous pouvez également l'utiliser avec des barres de défilement. Le paramètre suivant peut être utilisé dans ce filtre -

N ° Sr. Paramètre et description
1

color

La couleur que vous aimeriez être transparente.

Exemple

<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>

Il produira le résultat suivant -

Effet d'ombre portée

L'ombre portée est utilisée pour créer une ombre de votre objet au décalage et à la couleur X (horizontal) et Y (vertical) spécifiés.

Les paramètres suivants peuvent être utilisés dans ce filtre -

N ° Sr. Paramètre et description
1

color

La couleur, au format #RRGGBB, du dropshadow.

2

offX

Nombre de pixels dont l'ombre portée est décalée par rapport à l'objet visuel, le long de l'axe des x. Les entiers positifs déplacent l'ombre portée vers la droite, les entiers négatifs déplacent l'ombre portée vers la gauche.

3

offY

Nombre de pixels dont l'ombre portée est décalée par rapport à l'objet visuel, le long de l'axe y. Les entiers positifs déplacent l'ombre portée vers le bas, les entiers négatifs déplacent l'ombre portée vers le haut.

4

positive

Si vrai, tous les pixels opaques de l'objet ont une ombre portée. Si false, tous les pixels transparents ont une ombre portée. La valeur par défaut est true.

Exemple

<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>

Il produira le résultat suivant -

Effet Flip

L'effet de retournement est utilisé pour créer une image miroir de l'objet. Les paramètres suivants peuvent être utilisés dans ce filtre -

N ° Sr. Paramètre et description
1

FlipH

Crée une image miroir horizontale

2

FlipV

Crée une image miroir verticale

Exemple

<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>

Il produira le résultat suivant -

Effet lumineux

L'effet Glow est utilisé pour créer une lueur autour de l'objet. S'il s'agit d'une image transparente, une lueur est créée autour de ses pixels opaques. Les paramètres suivants peuvent être utilisés dans ce filtre -

N ° Sr. Paramètre et description
1

color

La couleur que vous voulez que la lueur soit.

2

strength

L'intensité de la lueur (de 1 à 255).

Exemple

<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>

Il produira le résultat suivant -

Effet en niveaux de gris

L'effet Niveaux de gris est utilisé pour convertir les couleurs de l'objet en 256 nuances de gris. Le paramètre suivant est utilisé dans ce filtre -

N ° Sr. Paramètre et description
1

grayscale

Convertit les couleurs de l'objet en 256 nuances de gris.

Exemple

<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>

Il produira le résultat suivant -

Effet inversé

L'effet d'inversion est utilisé pour mapper les couleurs de l'objet à leurs valeurs opposées dans le spectre de couleurs, c'est-à-dire pour créer une image négative. Le paramètre suivant est utilisé dans ce filtre -

N ° Sr. Paramètre et description
1

Invert

Mappe les couleurs de l'objet à leur valeur opposée dans le spectre de couleurs.

Exemple

<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>

Il produira le résultat suivant -

Effet de masque

L'effet de masque est utilisé pour transformer les pixels transparents en une couleur spécifiée et rend les pixels opaques transparents. Le paramètre suivant est utilisé dans ce filtre -

N ° Sr. Paramètre et description
1

color

La couleur que deviendront les zones transparentes.

Exemple

<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>

Il produira le résultat suivant -

Filtre d'ombre

Le filtre d'ombre est utilisé pour créer une ombre atténuée dans la direction et la couleur spécifiées. Il s'agit d'un filtre situé entre Dropshadow et Glow. Les paramètres suivants peuvent être utilisés dans ce filtre -

N ° Sr. Paramètre et description
1

color

La couleur que vous voulez que l'ombre soit.

2

direction

La direction du flou, dans le sens des aiguilles d'une montre, arrondie à des incréments de 45 degrés. La valeur par défaut est 270 (à gauche).

0 = Haut

45 = En haut à droite

90 = Droite

135 = En bas à droite

180 = bas

225 = En bas à gauche

270 = Gauche

315 = En haut à gauche

Exemple

<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>

Il produira le résultat suivant -

Effet de vague

L'effet d'onde est utilisé pour donner à l'objet une distorsion d'onde sinusoïdale pour lui donner un aspect ondulé. Les paramètres suivants peuvent être utilisés dans ce filtre -

N ° Sr. Paramètre et description
1

add

Une valeur de 1 ajoute l'image d'origine à l'image ondulée, 0 ne le fait pas.

2

freq

Le nombre de vagues.

3

light

La force de la lumière sur l'onde (de 0 à 100).

4

phase

À quel degré l'onde sinusoïdale doit commencer (de 0 à 100).

5

strength

L'intensité de l'effet de vague.

Exemple

<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>

Il produira le résultat suivant -

Effet X-Ray

Effet X-Ray en niveaux de gris et aplatit la profondeur de couleur. Le paramètre suivant est utilisé dans ce filtre:

N ° Sr. Paramètre et description
1

xray

Niveaux de gris et aplatit la profondeur de la couleur.

Exemple

<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>

Il produira le résultat suivant -