SELFHTML/Navigationshilfen Feuilles de style CSS Propriétés CSS| SELFHTML/Navigationshilfen Feuilles de style CSS Propriétés CSS |
 |
Filtres (seulement Microsoft) |
|
|
 | |
Les propriétés CSS présentées ici viennent du domaine du traitement de photos. Les filtres produisent des effets qui peuvent être employés sur des objets appropriés.
Ces filtres permettent certes des effets optiques très intéressants. Même une mise en forme artistique du texte est rendue possible ce qui aide à éviter certains graphiques. Cependant, toutes ces propriétés CSS pour les filtres ne font pas partie du standard CSS et sont une caractéristique spécifique à l'Explorer Internet. Les autres navigateurs n'interprètent pas ces propriétés.
Vous pouvez mentionner ces filtres pour des éléments distincts; ils modifieront l'élément de façon dynamique. Le principe est toujours le même.
<img src="graphique.gif" style="filter:Blur(strength=50)"> <img src="graphique.gif" style="filter:Blur(strength=50) FlipH();"> |
Avec filter: vous pouvez spécifier un filtre d'effet. Derrière les deux points suit l'appel du filtre. Quelques filtres attendent des paramètres, d'autres pas. Notez les paramètres et leurs mentions de valeur pour les filtres entre parenthèses, immédiatement derrière le nom du filtre comme dans l'exemple ci-dessus (strength=50) est transmis comme paramètre au filtre Blur(). Quand un filtre n'attend pas de paramètre, notez malgré tout les parenthèses en les laissant vides de contenu.
Vous pouvez également combiner plusieurs filtres. Dans le deuxième des exemples ci-dessus, les deux filtres Blur() et FlipH() sont combinés. Pour ce faire, vous ne pouvez noter qu'une fois le mot clé filter:. Entre ce mot clé et le prochain point virgule (;) qui clôture la mention de feuille de style, vous pouvez noter plusieurs filtres. Séparez les filtres par un espace avant le nom du prochain filtre, comme dans l'exemple avant FlipH().
Les filtres sont conçus pour les éléments HTML suivants (pour les autres, ils ne fonctionnent pas):
body (L'effet affecte la totalité de la page affichée)
button (L'effet affecte la surface pouvant être cliquée)
div (L'effet affecte le passage en relation avec les mentions de feuilles de style width: et/ou height: et/ou position:)
img (L'effet affecte le graphique référencé)
input (L'effet affecte le champ de saisie)
marquee (L'effet affecte le texte déroulant)
span (L'effet affecte le passage en relation avec les mentions de feuilles de style width: et/ou height: et/ou position:)
table (L'effet affecte le tableau)
td (L'effet affecte la cellule de données d'un tableau)
textarea (L'effet affecte le champ de saisie à plusieurs lignes)
tfoot (L'effet affecte le pied d'un tableau)
th (L'effet affecte la rangée d'entête d'un tableau)
thead (L'effet affecte l'entête d'un tableau)
tr (L'effet affecte la rangée d'un tableau)
Il existe encore trois autres filtres Microsoft qui ont pourtant besoin du soutien de langages Script.
Ces filtres ne deviennent vraiment intéressants que lorsqu'ils sont modifiés de façon dynamique. Lisez à ce sujet dans le chapitre sur 
HTML dynamique la partie traitant des 
filtres dynamiques (seulement Microsoft).
Sur cette page, les filtres introduits avec l'Explorer Internet 4.0, seront décrits. Avec la version 5.5 de son navigateur Microsoft a introduit encore une nouvelle syntaxe élargie.
À la place du schéma de syntaxe: filter:nomdufiltre(propriétes)
le nouveau schéma de syntaxe: filter:progid:DXImageTransform.Microsoft.nomdufiltre(propriétes) entre en vigueur
 |
filter:Alpha() (Fusionner l'avant-plan et l'arrière-plan)Avec ce filtre vous pouvez fusionner les éléments de premier plan et les éléments d'arrière plan en couleurs. Le filtre offre différentes possibilités, comment un élément de premier plan peut "sortir" de son arrière plan.
<html><head><title>filter:Alpha()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <div style="background-image:url(arriereplan3.jpg); padding:20px; text-align:center"> <img src="filter_alpha.gif" style="filter:Alpha(opacity=100, finishopacity=0, style=2)" width="247" height="383" alt="Grafik" border="0"></div> </body></html> |
Avec filter:Alpha() vous pouvez fusionner ensemble l'avant plan et
l'arrière plan. Le filtre est approprié par exemple pour des graphiques qui apparaissent sur des graphiques d'arrière plan. Ce filtre attend les paramètres suivants:
opacity= degré de couverture au début de la fusion. Les valeurs permises sont comprises entre 0 et 100. La valeur 0 signifie: tout à fait transparent (l'arrière plan transparaît), La valeur 100 signifie: tout à fait opaque (L'arrière plan est invisible).
finishopacity= degré de couverture à la fin de la fusion. Les valeurs permises sont comprises entre 0 et 100. La valeur 0 signifie: tout à fait transparent (l'arrière-plan transparaît), La valeur 100 signifie: tout à fait opaque (L'arrière plan est invisible).
style= style dans lequel agit l'effet. Les valeurs permises sont 0, 1, 2 et 3.
0 signifie: l'arrière plan et le premier plan voient leurs valeurs de couleurs additionnées. Les couleurs de l'élément de premier plan sont manipulées en conséquence. Pas de fusion. Les mentions pour les autres paramètres ne sont dans ce cas pas nécessaires, c'est à dire Alpha(style=0) suffit.
1signifie: fondu linéaire à partir d'un point de départ que vous définissez vous-même à un point d'arrivée que vous définissez vous-même. Au point de départ est valable la valeur mentionnée pour opacity=. À partir du point d'arrivée la valeur pour opacity= perd son influence, et c'est la valeur pour finishopacity= qui domine. Spécifiez le point de départ à l'aide de startx= et starty=, et le point d'arrivée par finishx= et finishy=.
2 signifie: fondu radial (elliptique) de l'intérieur vers l'extérieur. Tout à fait à l'intérieur est valable la valeur mentionnée pour opacity=,
tout à fait à l'extérieur la valeur mentionnée pour finishopacity=. Dans ce cas vous pouvez omettre les mentions pour startx=, starty=, finishx= et finishy= comme dans l'exemple ci-dessus.
3 signifie: fondu rectangulaire de l'intérieur vers l'extérieur. Tout à fait à l'intérieur est valable la valeur mentionnée pour opacity=, tout à fait à l'extérieur la valeur mentionnée pour finishopacity=. Dans ce cas vous pouvez omettre les mentions pour startx=, starty=, finishx= et finishy= comme dans l'exemple ci-dessus.
startx= point de départ à partir du bord gauche de l'élément de premier plan horizontalement et en pixels. N'est significatif qu'en relation avec style=1.
starty= point de départ à partir du bord supérieur de l'élément de premier plan verticalement et en pixels. N'est significatif qu'en relation avec style=1.
finishx= point d'arrivée à partir du bord gauche de l'élément de premier plan horizontalement et en pixels. N'est significatif qu'en relation avec style=1.
finishy= point d'arrivée à partir du bord supérieur de l'élément de premier plan verticalement
et en pixels. N'est significatif qu'en relation avec style=1.
|
|
filter:Blur() (Effet d'estompe)Ce filtre permet d'appliquer un effet d'estompe aux graphiques en HTML.
<html><head><title>filter:Blur()</title>
</head><body bgcolor="#FFFFFF" text="#000000">
<p>à gauche l'image sous sa forme normale, à droite avec le filtre Blur():</p>
<img src="filter_blur.jpg" width="91" height="177" alt="image" border="0">
<img src="filter_blur.jpg" width="91" height="177" alt="image" border="0"
style="filter:Blur(direction=45, strength=40)">
<div style="width:100%; padding:20px; font-size:42pt; color:red;
filter:Blur(direction=235, strength=6)">Texte avec effet d'estompe</div>
</body></html>
|
Avec filter:Blur() vous pouvez définir un effet d'estompe. Ce filtre est approprié pour les graphiques. Ce filtre attend les paramètres suivants:
add= Vous n'avez besoin de mentionner ce paramètre que si vous voulez noter add=0. Alors les contours du graphiques n'apparaissent plus du tout et seule la trace estompée apparaît à l'écran. L'effet en est renforcé, le graphique lui
même ne peut souvent plus être reconnu.
direction= Avec ce paramètre vous mentionner la direction dans laquelle conduit la trace estompée. On a alors l'impression que le graphique vient de cette direction. Les valeurs permises sont 0, 45, 90, 135, 180, 225, 270, 315:
0 signifie: la trace estompée désigne le haut.
45 signifie: la trace estompée désigne le haut à droite.
90 signifie: la trace estompée désigne la droite.
135 signifie: la trace estompée désigne le bas à droite.
180 signifie: la trace estompée désigne le bas.
225 signifie: la trace estompée désigne le bas à gauche.
270 signifie: la trace estompée désigne la gauche.
315 signifie: la trace estompée désigne le haut à gauche.
strength= Avec ce paramètre vous spécifier quelle force doit avoir l'effet d'estompe. 0 signifie pas d'effet d'estompe, chaque valeur plus élevée désigne la trace estompée en pixels. Veillez pourtant que le graphique est représenté dans sa
taille normale. Les traces estompées de contours très proches du bord de l'image ne seront tracées que jusqu'au bord de l'image.
|
|
filter:Chroma() (Couleur transparente)Avec ce filtre vous pouvez définir pour des graphiques une couleur comme
transparente. À la différence des graphiques GIF transparents toutes les autres couleurs du graphique sont pourtant
également concernées.
<html><head><title>filter:Chroma()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <p>à gauche l'image sous sa forme normale, à droite avec le filtre Chroma():</p> <img src="filter_chroma.gif" width="106" height="109" alt="image" border="0"> <img src="filter_chroma.gif" style="filter:Chroma(color=#DDBB99)" width="106" height="109" alt="image" border="0"></pre> </body></html> |
Avec filter:Chroma() vous pouvez définir une couleur dans un graphique comme transparente. Le filtre attend les paramètres suivants:
color= une mention de couleur.
|
|
filter:DropShadow() (Ombrage)Ce filtre provoque un effet d'ombrage pour tous les contours d'un élément. Pour du texte les caractères représentent les contours, pour les graphiques vous ne devez n'utiliser que les graphiques ayant des contours francs par exemple les Cliparts.
<html><head><title>filter:DropShadow()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <div style="width:100%; font-size:64pt; color:blue; filter:DropShadow(color=#C0C0C0, offx=3, offy=3)"> Texte avec ombrage</div> </body></html> |
Avec filter:DropShadow() vous pouvez imposer un ombrage. Le filtre attend les paramètres suivants:
color= une mention de la couleur qui doit être définie
comme ombre (voir mention de couleur).
offx= nombre de pixels horizontalement pour l'effet d'ombrage. Les nombres positifs créent un ombrage à droite, les nombres négatifs précédés du signe moins un effet d'ombrage à gauche.
offy= nombre de pixels verticalement pour l'effet d'ombrage. Les nombres positifs créent un ombrage en bas, les nombres négatifs précédés du signe moins un effet d'ombrage en haut.
positive= Vous ne devez mentionner ce paramètre que si vous voulez imposer un effet d'ombrage pour les pixels transparents d'un graphique (voir graphiques GIF transparents). Pour cela, ce paramètre doit avoir la valeur 1.
Pour des ombres dégradées vous pouvez utiliser le filtre pour les (Ombres) filter:Shadow().
|
|
filter:FlipH() (Symétrie sur axe horizontal)Avec ce filtre vous pouvez afficher un graphique comme s'il avait pivoté sur son axe horizontal.
<html><head><title>filter:FlipH()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <p>À gauche le graphique normal, à droite avec le filtre FlipH():</p> <img src="filter_flip.jpg" width="200" height="140" border="0" alt="image"> <img src="filter_flip.jpg" style="filter:FlipH()" width="200" height="140" border="0" alt="image"> </body></html> |
Avec filter:FlipH() vous provoquez la symétrie sur axe horizontal. Le filtre est approprié pour des graphiques en HTML. Ce filtre n'attend aucun paramètre.
|
|
filter:FlipV() (Symétrie sur axe vertical)Avec ce filtre vous pouvez afficher un graphique comme s'il avait pivoté sur son axe vertical.
<html><head><title>filter:FlipV()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <p>À gauche le graphique normal, à droite avec le filtre FlipV():</p> <img src="filter_flip.jpg" width="200" height="140" border="0" alt="image"> <img src="filter_flip.jpg" style="filter:FlipV()" width="200" height="140" border="0" alt="image"> </body></html> |
Avec filter:FlipV() vous provoquez la symétrie sur axe vertical. Le filtre est approprié pour des graphiques en HTML. Ce filtre n'attend aucun paramètre.
|
|
filter:Glow() (Bords flambants)Ce filtre crée une auréole autour d'un texte ou d'un objet graphique.
<html><head><title>filter:Glow()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <div style="width:100%; font-size:64pt; color:#9999CC; filter:Glow(color=#000000, strength=12)">Texte flambant</div> </body></html> |
Avec filter:Glow() vous pouvez définir un bord flambant. Ce filtre attend les paramètres suivants:
color= Une mention de la couleur qui doit être définie comme couleur du flamboiement (voir mention de couleur).
strength= Force de l'effet. Les valeurs comprises entre 1 et 255 sont permises, dans la pratique on utilise dans la plupart des cas des valeurs comprises entre 1 et environ 20.
|
|
filter:Gray() (Nuances de gris)Ce filtre supprime toutes les informations de couleur d'un élément ou d'un graphique et les transforme en nuances de gris.
<html><head><title>filter:Gray()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <p>À gauche le graphique normal, à droite avec le filtre Gray():</p> <img src="filter_gray.jpg" width="200" height="240" border="0" alt="image"> <img src="filter_gray.jpg" style="filter:Gray()" width="200" height="240" border="0" alt="image"> </body></html> |
Avec filter:Gray() vous pouvez imposer les nuances de gris. Ce filtre est particulièrement bien approprié pour les graphiques. Ce filtre n'attend aucun paramètre.
|
|
filter:Invert() (Inverser)Ce filtre inverse les éléments de couleurs et les graphiques. Toutes les couleurs sont remplacées à l'affichage par leur couleur complémentaire.
<html><head><title>filter:Invert()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <p>À gauche le graphique normal, à droite avec le filtre Invert():</p> <img src="filter_invert.jpg" width="200" height="200" border="0" alt="image"> <img src="filter_invert.jpg" style="filter:Invert()" width="200" height="200" border="0" alt="image"> </body></html> |
Avec filter:Invert() vous pouvez inverser les couleurs Ce filtre
est particulièrement bien approprié pour les graphiques. Ce filtre n'attend aucun paramètre.
|
|
filter:Mask() (Masque transparent)Ce filtre est conçu pour les graphiques GIF transparents. Il remplace tous les pixels transparents du graphique
par la couleur désirée et à la place tous les pixels non transparents du graphique par la couleur définie comme transparente dans le graphique.
<html><head><title>filter:Mask()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <p>À gauche le graphique normal, à droite avec le filtre Mask():</p> <img src="filter_mask.gif" width="100" height="94" border="0" alt="image"> <img src="filter_mask.gif" style="filter:Mask(color=#000066)" width="100" height="94" border="0" alt="image"> </body></html> |
Avec filter:Mask() vous pouvez définir un masque transparent pour un graphique GIF transparent. Le filtre attend les paramètres suivants:
color= une mention de couleur.
|
|
filter:Shadow() (Ombres)Ce filtre provoque une ombre dégradée autour des contours d'un élément.
<html><head><title>filter:Shadow()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <div style="width:100%; font-size:48pt; color:magenta; filter:Shadow(color=#000000, direction=45)"> Texte avec des ombres</div> </body></html> |
Avec filter:Shadow() Vous pouvez créer une ombre. Ce filtre attend les paramètres suivants:
color= Une mention de la couleur de l'ombre (voir mention de couleur).
direction= Avec ce paramètre vous donnez la direction dans laquelle se dirige l'ombre. Les valeurs permises sont 0, 45, 90, 135, 180, 225, 270, 315:
0 signifie: L'effet d'ombre se dirige vers le haut.
45 signifie: L'effet d'ombre se dirige vers le haut à droite.
90 signifie: L'effet d'ombre se dirige vers la droite.
135 signifie: L'effet d'ombre se dirige vers le bas à droite.
180 signifie:L'effet d'ombre se dirige vers le bas.
225 signifie: L'effet d'ombre se dirige vers le bas à gauche.
270 signifie: L'effet d'ombre se dirige vers la gauche.
315 signifie: L'effet d'ombre se dirige vers le haut à gauche.
|
|
filter:Wave() (Ondulation)Ce filtre provoque une distorsion en ondulation du texte ou du graphique concerné.
<html><head><title>filter:Wave()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <div style="width:100%; font-size:92pt; font-weight:900; color:#FFCCFF; filter:Wave(freq=5, light=20, phase=50, strength=6) Shadow(color=#808080, direction=135);"> Texte vague</div> </body></html> |
Avec filter:Wave() vous pouvez définir une déformation sous forme de vagues. Ce filtre attend les paramètres suivants:
freq= La fréquence des vagues. Plus la valeur est élevée, plus les vagues sont petites, plus la valeur est basse, plus les vagues sont grandes. Dans la pratique, on utilise des valeurs comprises entre 5 et 50.
light= Intensité de la lumière dans l'ondulation en pourcentage. Valeurs entre 0 et 100.
phase= Début de la phase de la vague en pourcentage. Valeurs entre 0 et 100. Avec 0 l'effet de vague débute normalement, avec 25 environ il commence à 90°.
strength= force de l'effet. Dans la pratique, on utilise des valeurs entre 1 et 10.
add= Si l'effet est utilisé sur un graphique add=1, fait en sorte que le graphique original soit ajouté au graphique déformé. Avec add=0 le graphique original n'est pas ajouté.
|
|
filter:XRay() (Effet négatif photo)Ce filtre convertit toutes les couleurs d'un élément ou d'un graphique en nuances de gris et provoque l'effet d'un négatif photo.
<html><head><title>filter:XRay()</title> </head><body bgcolor="#FFFFFF" text="#000000"> <p>À gauche le graphique normal, à droite avec le filtre XRay():</p> <img src="filter_x_ray.jpg" width="276" height="189" border="0" alt=""> <img src="filter_x_ray.jpg" style="filter:XRay()" width="276" height="189" border="0" alt=""> </body></html> |
Avec filter:XRay() vous pouvez imposer un effet de négatif photo. Ce filtre n'attend aucun paramètre.
|
| |
 |
Introduction à XML
|
 |
Fenêtre d'affichage
|
| SELFHTML/Aides à la navigation Feuilles de style CSS Propriétés CSS |
© 2001 Stefan Münz / © 2003 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
