Les filtres

Dans ce cours, nous allons nous intéresser à une excellente nouvelle fonctionnalité de CSS3 : les filtres. C'est une fonctionnalité qui peut être utilisée à la fois sur des éléments HTML et des images, mais qui a plus d'intérêt à être utilisée sur des images comme pour la création d'une galerie, par exemple. Notons que comme la plupart des nouvelles fonctionnalités de CSS3, il faudra utiliser les préfixes de propriété.

Notez que l'on utilise soit le pourcentage, soit les pixels (ceci est précisé pour chaque filtre).

En utilisant uniquement le CSS vous allez être capable de créer tous les effets suivants :

None (par défaut)
Grayscale
Blur
Saturate
Sepia
Hue-rotate
Invert
Brightness
Contrast
Opacity
Drop-Shadow

Grayscale (+)

Cette propriété va convertir votre image en nuances de gris (noir et blanc).

La valeur du filtre peut-être soit un pourcentage soit un nombre décimal.

La valeur 0 ou 0% n'aura aucun effet, il s'agit de la valeur par défaut (none) et 1 ou 100% transformera l'image en noir et blanc total.

Code appliqué :


                        #grayscale #filtre_grayscale:hover  {

                        filter: grayscale(0.7);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: grayscale(0.7);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: grayscale(0.7);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Blur (+)

Cet effet appliquera à votre image un flou qui sera plus ou moins important en fonction de la valeur de la propriété.

Le flou sera mesuré en pixels ; plus la valeur sera grande et plus l'image sera floutée.

Code appliqué :


                        #blur #filtre_blur:hover  {

                        filter: blur(5px);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: blur(5px);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: blur(5px);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Saturate (+)

Cet effet ajoute de la saturation sur les couleurs de votre image.

La valeur de la propriété peut être un nombre décimal ou un pourcentage, sachant que la saturation par défaut est de 100%.

Pour ajouter de la saturation, il faut donc renseigner une valeur supérieure à 100%.

Code appliqué :


                        #saturate #filtre_saturate:hover  {

                        filter: saturate(500%);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: saturate(500%);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: saturate(500%);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Sepia (+)

Cet effet va ajouter une teinte sepia à votre image ce qui donne l'impression que c'est une vieille photographie.

La valeur du filtre peut-être soit un pourcentage, soit un nombr /e décimal.

La valeur 0 ou 0% n'aura aucun effet, il s'agit de la valeur par défaut (none) et 1 ou 100% transformera totalement l'image.

Code appliqué :


                        #sepia #filtre_sepia:hover  {

                        filter: sepia(0.7);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: sepia(0.7);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: sepia(0.7);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Hue-rotate (+)

Cet effet va changer la couleur de l'image qui sera complètement différente en fonction du degré que vous affecterez en CSS.

La meilleure représentation de cet effet est de penser à une roue de spectres de couleur.

La couleur de départ sera modifiée pour une nouvelle couleur qui correspondra à la valeur attribuée à la propriété hue-rotate.

Code appliqué :


                        #hue_rotate #filtre_hue_rotate:hover  {

                        filter: hue-rotate(200deg);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: hue-rotate(200deg);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: hue-rotate(200deg);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Invert (+)

Cet effet va changer l'apparence de l'image qui ressemblera à un négatif (dans le temps où l'on développait encore nos photos).

La valeur du filtre peut-être soit un pourcentage, soit un nombre décimal.

La valeur 0 ou 0% n'aura aucun effet, il s'agit de la valeur par défaut (none) et 1 ou 100% transformera totalement l'image.

Code appliqué :


                        #invert #filtre_invert:hover  {

                        filter: invert(0.7);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: invert(0.7);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: invert(0.7);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Brightness (+)

Cet effet permet de modifier la luminosité de l'image.

La valeur du filtre peut-être soit un pourcentage, soit un nombre décimal.

La valeur 0 ou 0% n'aura aucun effet, il s'agit de la valeur par défaut (none) et 1 ou 100% transformera totalement l'image.

Code appliqué :


                        #brightness #filtre_brightness:hover  {

                        filter: brightness(1.5);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: brightness(1.5);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: brightness(1.5);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Contrast (+)

Cet effet va modifier le contraste de l'image, c'est-à-dire la différence entre les zones sombres et les zones claires.

La valeur du filtre peut-être soit un pourcentage, soit un nombre décimal.

La valeur 0 ou 0% n'aura aucun effet, il s'agit de la valeur par défaut (none) et 1 ou 100% transformera totalement l'image.

Code appliqué :


                        #contrast #filtre_contrast:hover  {

                        filter: contrast(0.7);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: contrast(0.7);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: contrast(0.7);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Opacity (+)

Cette fonction permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité.

Ainsi, une valeur de 0% rendra l'image complètement transparente et une valeur de 100% conservera l'image telle quelle.

Les valeurs intermédiaires appliqueront des effets proportionnels.

La valeur par défaut de l'argument est 1.

Cette fonction est proche de la propriété opacity, toutefois, avec les filtres, certains navigateurs utilisent l'accélération matérielle, ce qui permet d'obtenir de meilleures performances.

Code appliqué :


                        #opacity #filtre_opacity:hover  {

                        filter: opacity(0.7);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: opacity(0.7);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: opacity(0.7);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Drop-Shadow (+)

Cette fonction permet d'ajouter une ombre portée à une image.

La fonction de feuille de style drop-shadow(offset-x offset-y spread-radius color) CSS peut prendre comme paramètres:

offset-x : valeur numérique obligatoire qui spécifie la distance horizontale de l'ombre, si elle est négative l'ombre est placée à gauche
offset-y : valeur numérique obligatoire qui spécifie la distance verticale de l'ombre, si elle est négative l'ombre est placée au dessus
spread-radius : valeur optionnelle numérique positive suivie de "px" ou % ou pt ou em, correspond à la longueur du rayon d'étendue
color, couleur (rgb, nommée,...) ex: #9ACD32

Code appliqué :


                        #drop_shadow #filtre_drop_shadow:hover  {

                        filter: drop-shadow(16px 16px 20px blue);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: drop-shadow(16px 16px 20px blue);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: drop-shadow(16px 16px 20px blue);

                        -moz-transition: all 0.3s ease-in-out;

                        }

Est-il possible de combiner des filtres? (+)

Oui, voici un exemple pratique.

Code appliqué :


                        #combinaison #filtre_combinaison:hover  {

                        filter: brightness(0.5) opacity(0.9) saturate(500%);

                        transition: all 0.3s ease-in-out;

                        -webkit-filter: brightness(0.5) opacity(0.9) saturate(500%);

                        -webkit-transition: all 0.3s ease-in-out;

                        -moz-filter: brightness(0.5) opacity(0.9) saturate(500%);

                        -moz-transition: all 0.3s ease-in-out;

                        }