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 -