Fiche CSS : Les filtres

Objet de la fiche

État de la fiche

Plan de la fiche

| Avant propos |
| Transparence et Opacités des images |
| Opacité et compatibilité tout navigateur |
| Filtres spécifiques IE |
| Application au projet de site web |

Avant propos

Cette fiche traite des modifications d'apparences de certains éléments HTML lorsque certains types de filtres leurs sont appliqués. Majoritairement cette fiche ne concerne que le navigateur Internet Explorer.

Transparence et Opacités des images

Ne pas confondre opacité d'une image et transparence d'une ou plusieurs couleurs. Ci dessous un exemple de transparence de couleurs.

Voici une image de dragon sur fond jaune	Voici la même image dont la couleur marron grise des ailes du dragon a été rendue partiellement transparente (couleur du fond).

Ci dessous un exemple de modification de l'opacité (dans ce cas c'est l'opacité de l'image jaune toute entière qui est modifiée et non plus une seule couleur)

Lorsque l'on superpose 2 images classiques, l'une va masquer l'autre.	Si l'on superpose 2 images dont celle de premier plan a été retouchée pour obtenir une opacité de 50% on obtient le résultat suivant.

Pour modifier son opacité une image peut être retouchée à l'aide de logiciels courants comme photo editor ou Power Point ou encore bien d'autres disponibles en freeware sur internet. Les formats d'image les plus courants permettant d'enregistrer une image avec son degré d'opacité sont les formats gif et png. Toutefois d'autres solutions existent grâce à l'utilisation des feuilles de style et de filtres.

Opacité et compatibilité tout navigateur

Principe

La solution consiste à utiliser les feuilles de style et des filtres: soit 2 images, dragon.gif et Transparence05.png (rectangle orange/jaune) que nous allons superposer à l'aide de la feuille de style et fusionner ensemble l'avant plan et l'arrière plan grâce à un filtre particulier.

La syntaxe de réglage de l'opacité est différente suivant le navigateur utilisé.

Pour Internet Explorer filter:progid:DXImageTransform.Microsoft.alpha(opacity=X) avec X compris entre 0 (transparence totale de l'image) à 100 (opacité totale de l'image).
Pour les autres navigateurs : opacity:Y avec Y compris entre 0 (transparence totale) et 1 (opacité totale de l'image).
La différentiation entre navigateur doit se faire par la syntaxe

Feuille de style

Filtres spécifiques Internet Explorer

Généralités

Plusieurs filtres sont disponibles exclusivement pour Internet Explorer

Les filtres pour IE
Noms des filtres	Actions
alpha()	Fusion des couleurs
blur()	Estompe
chroma()	Définition d'une couleur comme transparente
dropshadow()	Ombre
shadow ()	Ombrage en dégradé
flipv()	Symétrie verticale
fliph()	Symétrie horizontale
invert()	Inversion des couleurs (couleur complémentaires)
glow()	Bords flamboyants
gray()	Nuances de gris
xray()	Effet de négatif
wave()	Ondulation
mask()	Masque de couleur

Domaines d'application

Éléments sur lesquels s'appliquent les filtres
Éléments	Applications
body	pour l'ensemble de la page
p	paragraphe
div	boites
span	boites en ligne
table, td, tfoot, th, thead, tr	pour l'ensemble du tableau considéré ou pour certains des éléments du tableau.
input	pour les champs de saisie

Syntaxe générale

filter:progid:DXImageTransform.Microsoft.nomdufiltre(propriétes1,propriétes2, .....)

ou plus classiquement

filter:nomdufiltre(propriétes1,propriétes2, .....)

Le filtre alpha (fusion des couleurs)

Propriétés du filtre alpha()
Propriétés	Valeurs
opacity = X	Niveau de fusion de l'image : avec X compris entre 0 (transparence totale) à 100 (opacité totale).
finishopacity = Y	Fondu linéaire à partir de la valeur X du paramètre opacity jusqu'à la valeur Y définie par le paramètre finishopacity. Y compris entre 0 (transparence totale) à 100 (opacité totale).
style = Z ⁽¹⁾	Style de l'effet avec Z compris entre 0 et 3.
	Z=0 : Les valeurs de couleurs d'arrière plan et de premier plan sont additionnées. Tous les autres paramètres sont superflus. alpha(style=0) suffit pour cette déclaration.
	Z=1 : Fondu linéaire entre un point de départ dont la valeur de l'opacité est définie par opacity = X et un point d'arrivée dont la valeur de l'opacité est définie par finishopacity = Y. Les points de départ est d'arrivée sont définis par startx, starty, finishx, finishy.
	Z=2 : Fondu radial de l'intérieur (opacity = X) vers l'extérieur( finishopacity = Y).
	Z=3 : Fondu rectangulaire de l'intérieur (opacity = X) vers l'extérieur( finishopacity = Y).
startx =	Position à partir du bord gauche, ou va être appliqué le filtre. Uniquement si style = 1.
starty =	Position à partir du haut, ou va être appliqué le filtre. Uniquement si style = 1.
finishx =	Position à partir du bord gauche, ou ne va plus s'appliquer le filtre. Uniquement si style = 1.
finishy =	Position à partir du haut, ou ne va plus s'appliquer le filtre. Uniquement si style = 1.

⁽¹⁾ Pour Z=1, 2 ou 3 les paramètres startx=, starty=, finishx= et finishy= peuvent être omis si on ne désire pas délimiter une certaine zone.

Exemple d'utilisation du filtre alpha() sous IE
Exemple de résultat avec le filtre alpha et la feuille de style associée filter:alpha(opacity=100,finishopacity=0,style=2)

Le filtre blur (estompe)

Propriétés du filtre blur()
Propriétés	Valeurs
add	0 : suppression des contours (seule la trace estompé apparaît). 1 : avec contour
direction	Définition du sens de l'estompe
strength	Valeur numérique qui définit en pixels la force de l'estompe. 0 => pas d'effet d'estompe

Exemple d'utilisation du filtre blur() sous IE
Exemple de résultat avec le filtre blur et la feuille de style associée filter:blur(add=1,direction=0,strength=10)

Le filtre chroma (définition d'une couleur comme transparente)

Propriétés du filtre chroma()
Propriétés	Valeurs
color	Valeurs classiques des couleurs sous forme de noms (white, black, red, green ...), de valeurs hexadécimales (#31C089) ou rgb (rgb(221,175,12).

Exemple d'utilisation du filtre chroma() sous IE
Exemple de résultat avec le filtre chroma et la feuille de style associée filter:chroma(color=#ffffff)

Le filtre dropshadow (ombre)

Propriétés du filtre dropshadow()
Propriétés	Valeurs
color	Couleur de l'ombre : valeurs classiques des couleurs sous forme de noms (white, black, red, green ...), de valeurs hexadécimales (#31C089) ou rgb (rgb(221,175,12).
offx = X	Dimension en pixels de l'ombre horizontale. X ombrage à droite, -X ombrage à gauche.
offy = Y	Dimension en pixels de l'ombre verticale. Y ombrage en bas, -Y ombrage en haut.
positive	=0 par défault, =1 effet d'ombrage sur les parties transparentes d'un élément (cas d'images gif ou png avec couleur de transparence).

Exemple d'utilisation du filtre dropshadow() sous IE
Exemple de résultat avec le filtre dropshadow et la feuille de style associée filter:dropshadow(color=gray,offx=10,offy=10,positive=1)

Le filtre shadow (ombrage en dégradé)

Propriétés du filtre shadow()
Propriétés	Valeurs
color	Couleur de l'ombre : valeurs classiques des couleurs sous forme de noms (white, black, red, green ...), de valeurs hexadécimales (#31C089) ou rgb (rgb(221,175,12).
direction	Définition du sens de l'ombrage

Exemple d'utilisation du filtre shadow() sous IE
Exemple de résultat avec le filtre shadow et la feuille de style associée filter:shadow(color=gray,direction=135)

Les filtres fliph(), flipv(), invert()(symétrie verticale, horizontale, inversion des couleurs)

flipv() provoque une symétrie verticale, fliph() une symétrie horizontale et invert() transforme toutes les couleurs par leur couleur complémentaire.

Ces trois propriétés ne demandent aucun paramètre.

Exemple d'utilisation des filtres fliph(), flipv() et invert() sous IE
Exemple de résultat avec le filtre flipv() et la feuille de style associée filter:flipv()
Exemple de résultat avec le filtre fliph() et la feuille de style associée filter:fliph()
Exemple de résultat avec le filtre invert() et la feuille de style associée filter:invert()

Le filtre glow() (bords flamboyants)

Propriétés du filtre glow()
Propriétés	Valeurs
color	Couleur de flamboiement : Valeurs classiques des couleurs sous forme de noms (white, black, red, green ...), de valeurs hexadécimales (#31C089) ou rgb (rgb(221,175,12).
strength	Valeur numérique qui définit en pixels la force du flamboiement. 0 => pas d'effet de flamboiement.

Exemple d'utilisation du filtre glow() sous IE
Exemple de résultat avec le filtre glow() et la feuille de style associée filter:glow(color=red,strength=10)

Le filtre gray() (nuances de gris)

Cette propriété ne demande aucun paramètre.

Exemple d'utilisation du filtre gray() sous IE
Exemple de résultat avec le filtre gray() et la feuille de style associée filter:gray()

Le Filtre xray() (effet de négatif)

Cette propriété ne demande aucun paramètre.

Exemple d'utilisation du filtre xray() sous IE
Exemple de résultat avec le filtre xray() et la feuille de style associée filter:xray()

Attention : La syntaxe officielle (filter:progid:DXImageTransform.Microsoft.xray() ne fonctionne pas à tous les coups. Dans le cas de non fonctionnement essayez : filter:xray ().

Le filtre wave() (effet d'ondulation)

Propriétés du filtre wave()
Propriétés	Valeurs
freq	Valeur numérique qui définit la fréquence de l'ondulation.
light	Pourcentage entre 0 et 100 de l'intensité lumineuse de l'ondulation.
phase	Valeur usuellement définie entre 0 et 50. Correspond aux déplacements des zones de creux et de pics.
strength	Valeur numérique qui définit en pixels la force de l'ondulation (amplitude). 0 => pas d'ondulation.
add	0 : suppression des contours (seule la trace ondulée apparaît). 1 : avec contour

Exemple d'utilisation du filtre wave() sous IE
Exemple de résultat avec le filtre wave() et la feuille de style associée filter:wave(freq=3,light=0,phase=10,strength=4,add=0)

Le filtre mask() (application d'un masque)

Propriétés du filtre mask()
Propriétés	Valeurs
color	Tout ce qui était initialement transparent est remplacé par la couleur définie par la valeur de color. Tout ce qui n'était pas initialement transparent est remplacé par la couleur de fond de l'élément. color prend les valeurs classiques des couleurs sous forme de noms (white, black, red, green ...), de valeurs hexadécimales (#31C089) ou rgb (rgb(221,175,12).

Exemple d'utilisation du filtre mask() sous IE
Exemple de résultat avec le filtre mask() et la feuille de style associée filter:mask(color=white)	Avant Après

Plusieurs filtres sur un même élément

Plusieurs filtres peuvent être appliqués en même temps sur un même élément.
filter:alpha(opacity=100,finishopacity=0,style=2) dropshadow(color=gray,offx=10,offy=10,positive=1) wave(freq=3,light=0,phase=10,strength=4,add=0)
ce qui donne l'image ci-contre :

Exemple récapitulatif

Application au projet de site web

Dans la page index.html on va présenter le tableau avec les images initiales dont on aura modifié l'opacité (50%) pour obtenir le résultat ci-contre. Pour cela on modifiera dans le fichier CSSExterneScreen.css la directive concernant #BoiteCatalogue table td img pour y introduire les notion d'opacité 50%.
De plus comme les notions d'opacité sont différentes par navigateur on apportera dans la page index.html la correction appropriée pour le cas Internet Explorer.

Lors du survol on rétablira l'opacité initiale de l'image (100%) pour la mettre en valeur afin d'obtenir le résultat ci-contre. Pour cela on modifiera la directive concernant #BoiteCatalogue table td img:hover pour y introduire la notion d'opacité 100%.
Comme précédemment les notions d'opacité étant différentes par navigateur on apportera dans la page index.html la correction appropriée pour le cas Internet Explorer.

Retrouvez la solution