Les Fiches de MonWebFacile





Chapitre

Fiche

 

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

Fiche CSS : Les filtres

Objet de la fiche

État de la fiche Terminée validée


Plan de la fiche

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 <!--[if IE]>  pour appliquer style adéquate dans le cas de Internet Explorer <![endif]-->

Feuille de style



Stop 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 (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 Direction Blur       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)

Real player

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)

Real player

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)

Real player

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 Direction Blur       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)

Real player

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()

Real player
Exemple de résultat avec le filtre fliph() et la feuille de style associée

filter:fliph()

Real player
Exemple de résultat avec le filtre invert() et la feuille de style associée

filter:invert()

Real player

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)

Real player

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()

Real player

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()

Real player

Avertissement 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)

Real player

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

Real player

Après

Real player

Plusieurs filtres sur un même élément

Real player

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



Respectons la propriété intellectuelle