ACCUEIL | PAGE PRECEDENTE | PAGE SUIVANTE | FIN DE PAGE | INDEX |
Les filtres visuels |
Attention : les filtres et transitions DirectX sont obsolètes dans Internet Explorer 10 ! |
Ils permettent la manipulation d'objets visibles en modifiant leur aspect. On peut utiliser l'un des filtres prédéfinis et listés ci-dessous.
{ filter: nom_filtre(paramètre1, paramètre2...)}
nom du filtre Identifiant et effet du filtre (cliquez sur le nom pour un exemple) :
Alpha Définit un degré de transparence de l'objet. Blur Crée une impression de flou, de mouvement à grande vitesse. Chroma Rend transparente une couleur donnée. DropShadow Crée un effet d'ombre portée. FlipH Crée une image miroir avec retournement horizontal. FlipV Crée une image miroir avec retournement vertical. Glow Ajoute un effet de rayonnement (un halo) autour des bords extérieurs de l' objet. Gray Elimine les couleurs d'une image et les remplace par des tons gris Invert Inverse les valeurs des paramètres de teinte, saturation et luminosité. Light Projette un faisceau lumineux sur un objet. Mask Crée un masque transparent d'un objet. Shadow Crée un contour (ombrage) autour de l'objet. Wave Crée une distorsion sinueuse suivant l'axe des x. XRay Montre seulement les bords de l'objet.
- Un filtre visuel peut être appliqué à n'importe quel objet visible d'une page HTML supportant la propriété "filter" (feuille de style), tels que les éléments DIV et IMG.
- Les filtres visuels peuvent s'enchaîner pour produire des effets intéressants. Pour enchaîner plusieurs filtres, incluez-les simplement les uns après les autres comme valeur de l'attribut "filter". Par exemple :
<DIV STYLE="position:absolute; filter:blur(direction=315) dropshadow()"> Effets garantis ! </DIV>Dans cet exemple, le filtre blur est appliqué le premier puis le filtre "dropshadow". Quand on utilise les filtres et les transitions, l'ordre dans lequel ils sont appliqués affecte souvent le résultat.
- L'astérisque dans la liste ci-dessous indique qu'une indication de la hauteur, de la largeur ou d'une position absolue est nécessaire.
BODY, BUTTON, DIV*,IMG,INPUT,MARQUEE,SPAN*,TABLE,TD,TEXTAREA,TFOOT, TH,THEAD,TR