Traduction
Tutoriel CSS - sommaire
Tutoriel CSS - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous voulez insérer, par exemple, dans une page web une photo qui doit apparaître floutée et couleur "sépia".
Plus besoin de passer par un logiciel graphique tel Photoshop ou Gimp pour modifier la photo originale.
Il vous suffit désormais de l'incorporer sans retouche dans la page (avec la balise IMG) et de la styler avec une règle basée sur la
nouvelle propriété filter.
La propriété filter peut s'appliquer à n'importe quel élément HTML.
Les images de la page sont "inline-block" et ont une largeur de 30%.
Pour flouter une image il faut utiliser la commande blur() avec en paramètre une valeur en pixels (px).
Plus la valeur est grande et plus l'image sera floue.
Pour vieillir une photo il faut utiliser la commande sepia avec en paramètre une valeur décimale comprise entre 0 et 1.
Nous allons maintenant passer en revue toutes les commandes possibles de la propriété CSS filter.
Et elles sont nombreuses ...
Grayscale : nuance de gris.
Si le paramètre est 1 (ou 100%) alors image en noir et blanc ; si paramètre vaut 0 alors aucun effet.
Ci-dessus l'argument est successivement 1, 0.5 et 0.
Code correspondant :
Sepia : effet de jaunissement de l'image.
Si paramètre vaut 1 (ou 100%) alors sepia total ; si paramètre vaut 0 alors l'image filtrée correspond à celle d'origine.
Ci-dessus l'argument est successivement 100%, 50% et 0%.
Code correspondant :
Saturate : ajoute de la saturation aux couleurs.
Si le paramètre vaut 1 (ou 100%) alors image filtrée correspond à celle d'origine.
Si le paramètre vaut 0 alors image en nuances de gris. Si l'argument est supérieur à 1 alors l'image est saturée.
Ci-dessus l'argument est successivement 0, 2 et 6.
Code correspondant :
Il s’agit d’une rotation sur le cercle chromatique.
Le paramètre est une valeur comprise entre 0 degré et 360 degrés.
Une rotation de 360° équivaut a une rotation de 0°.
Ci-dessus l'argument est successivement 0 deg, 90deg, 180deg et 270deg.
Le code correspondant :
Floute l'image.
Le paramètre est exprimé en pixels (px). Si l'argument est 0px alors aucun floutage.
Ci-dessus l'argument vaut successivement 6px, 3px et 0px.
Code correspondant :
Pour obtenir le négatif d'une image.
L'argument ne peut prendre que deux valeurs : 1(négatif) ou 0 (image d'origine).
Le code correspondant :
Permet de modifier la luminosité de l'image.
La valeur de référence est 1 (ou 100%) ; si argument supérieur à 1 alors image éclaircie ; si argument est inférieur à 1 alors image assombrie.
Ci-dessus l'argument vaut successivement 200%, 100%, 50% et 25%
Code correspondant :
Permet de modifier le contraste de l'image.
La valeur de référence est 1 (ou 100%) ; si argument supérieur à 1 alors image plus contrastée ;
si argument est égal à 0 alors affichage d'une zone grisée. Si le paramètre compris entre 1 et 0 alors perte de contraste.
Ci-dessus l'argument vaut successivement 200%, 100%, 50% et 0%.
Code correspondant :
Cette commande permet de créer une ombre portée.
Le code correspondant :
Plutôt que d'utiliser la propriété filter argumentée avec la fonction drop-shadow(), il est possible d'utiliser la propriété box-shadow.
Les photos ci-dessus sont floutées mais aussi sont verdies.
Une classe dans la feuille de style et deux instructions :
On peut donc produire des filtres composites c'est à dire basés sur plusieurs primitives.
Ici le filtre (défini par la classe filtre1) est basé sur deux fonctions : blur() et hue-rotate().
Il est possible d'appliquer les filtres CSS aux formes d'une zone de dessin Canvas.