ATTENTION : Certaines informations contenues dans cette fiche sont obsolètes (surtout celles liées au navigateur Internet) mais peuvent être interressantes dans le cadre de l'étude de sites internet anciens. Les développements actuels doivent se faire avec les directives CSS relatives aux balises et API HTML5
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 <!--[if IE]> pour appliquer style adéquate dans le cas de Internet Explorer <![endif]-->
Feuille de style
Filtres spécifiques Internet Explorer
Généralités
Plusieurs filtres sont disponibles exclusivement pour Internet Explorer
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(1)
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.
(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
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
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.