Les filtres (CSS3)

Tuto - Les filtres (CSS3)

Certains auront peut-être vu le tutoriel d'Alzufen sur comment faire passer une image "noir et blanc" à "couleur" ou ce tutoriel de Sparrow-Style sur l'opacité. Les filtres sont une nouveauté du CSS3 qui appliquent un certain filtre sur une image et peuvent être utilisés pour parvenir aux mêmes résultats que dans ces deux tutoriels. Il existe 10 filtres différents et ce tuto vous permettra d'apprendre à les connaître et les utiliser.

Voici ce que ce tutoriel va contenir :

• 1. Ce qu'est un filtre et comment s'en servir?
• 2. Greyscale => Échelle de noir et blanc
• 3. Blur => Flou
• 4. Saturate => Saturation
• 5. Sepia
• 6. Hue Rotate => Roue des couleurs/teintes
• 7. Invert => Invertion
• 8. Brightness => Luminosité
• 9. Contrast => Contraste
• 10. Opacity => Opacité
• 11. Drop Shadow
• 12. Comment faire pour que l'effet soit progressif?
• 13. Comment additionner plusieurs filtres

1. Les filtres (Ce que c'est)

C'est quoi exactement un filtre?
Dites-moi, si vous mettez une paire de lunettes roses, qu'est-ce que vous verrez? Et bien vous verrez la même chose que normalement, mais en rose. Et plus la teinte de vos lunettes sera forte, plus ce que vous verrez semblera rose.
Un filtre fonctionne de la même façon! En appliquant un filtre sur une image, c'est comme de mettre un calque invisible avec un effet spécial sur l'image. Plus vous intensifierez le filtre, plus l'image sera affectée par l'effet spécial.

Mais plus encore, quand on parle de codage, c'est quoi un filtre?
C'est simplement une propriété CSS à laquelle on donne une valeur pour déterminer l'intensité du filtre.

Et comment on l'utilise?
La première des choses est de mettre une image à l'endroit que l'on veut. Après tout, les filtres ne s'appliquent que sur les images. Nous allons donc mettre une image avec une class. Cela donnerait donc :

Code:

<img class="nom_de_la_class" src="url_de_l'image" />

Ensuite, on met le filtre comme une propriété normale dans le CSS. On commence par mettre la propriété "filter" qui indique qu'il y a un filtre. Puis, on détermine un "type" qui nous indique quel effet de filtre est utilisé. Ensuite, entre parenthèses, on indique la valeur qui détermine l'intensité du filtre. Nous aurons donc ceci :

Code:

.nom_de_la_class {
  -webkit-filter: type(valeur);
  filter: type(valeur);
}

2. Greyscale (Noir et blanc)

Premièrement, à quoi sert le filtre Greyscale? Eh bien ce filtre va convertir votre image en nuances de gris (noir et blanc). D'ailleurs, voici un exemple :



Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image est en "couleurs".
> La valeur maximale est de "1", à savoir que l'image est complètement en noir et blanc.
> En choisissant une valeur entre "0" et "1", l'image sera de plus en plus dans des tons de noir et blanc au fur et à mesure qu'on se rapproche du "1".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: grayscale(1);" pour y mettre le filtre en noir et blanc au maximum.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: grayscale(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse en couleurs.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.nom_de_la_class:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

3. Blur (Flou)

Premièrement, à quoi sert le filtre Blur? Eh bien ce filtre va mettre un flou sur votre image. D'ailleurs, voici un exemple :



Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image reste nette
> Plus on choisit une valeur en px élevée, plus le filtre est appliqué fortement.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: blur(1px);" pour y mettre le filtre qui rend l'image floue de 1px.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: blur(0);" pour qu'au survol, le filtre se dissipe et que l'image apparaisse sans flou.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: blur(1px);
  filter: blur(1px);
}

.nom_de_la_class:hover {
  -webkit-filter: blur(0);
  filter: blur(0);
}

4. Saturate (Saturation)

Premièrement, à quoi sert le filtre Saturate? Eh bien ce filtre va servir à augmenter ou diminuer la saturation de votre image. D'ailleurs, voici un exemple :



Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que la saturation est normale.
> En mettant une valeur de "0", l'image n'aura plus aucune saturation et apparaîtra en noir et blanc.
> Plus on choisit une valeur élevée au-delà de "1", plus l'image sera saturée.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: saturate(3);" pour augmenter la saturation à 300%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: saturate(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa saturation normale.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: saturate(3);
  filter: saturate(3);
}

.nom_de_la_class:hover {
  -webkit-filter: saturate(1);
  filter: saturate(1);
}

5. Sepia

Premièrement, à quoi sert le filtre Sepia? Eh bien ce filtre va mettre un filtre qui fait ressembler votre image à une vieille photographie. D'ailleurs, voici un exemple :



Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de sepia de "0", à savoir qu'aucun filtre n'est appliqué et que l'image a ses couleurs normales.
> La valeur maximale est de "1", à savoir que l'image ressemble complètement à une vieille photographie.
> En choisissant une valeur entre "0" et "1", l'image sera de plus en plus semblable à une vieille photographie au fur et à mesure qu'on se rapproche du "1".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: sepia(1);" pour que l'image ressemble à une vieille photographie.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: sepia(1);
  filter: sepia(1);
}

.nom_de_la_class:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}

6. Hue Rotate (Roue de couleurs)

Premièrement, à quoi sert le filtre Hue Rotate? C'est un peu plus dur à expliquer... Si on pense à une roue de couleurs, notre image de base est sur un point de cette roue. En changeant la valeur de Hue Rotate, nous allons modifier les couleurs de l'image Voici un exemple pour illustrer un peu mieux :



Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image est à "0deg" de la roue.
> Une valeur à "360deg" nous ramène au point de départ sur la roue.
> Il est possible de mettre une valeur entre "0deg" et "360deg" et les couleurs de l'image sont affectés selon l'angle de la roue. Il est dur de voir avec exactitude quel couleur cela nous donnera, alors il est mieux de fonctionner par essai/erreur.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: hue-rotate(270deg);" pour mettre mon image au 270ème degré de couleur sur la roue des couleurs.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: rotate(0deg);" pour qu'au survol, le filtre se dissipe et que l'image reprenne ses couleurs normales.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: hue-rotate(270deg);
  filter: hue-rotate(270deg);
}

.nom_de_la_class:hover {
  -webkit-filter: hue-rotate(0deg);
  filter: hue-rotate(0deg);
}

Petit détail relativement important
Je sais que certains ont tendance à ne pas mettre les "px" ou les "deg" quand la valeur est de 0.
Or, si vous ne mettez pas le "deg" à 0 pour ce filtre, firefox ne le prend pas en considération.
Du coup, assurez-vous de mettre "hue-rotate(0deg)" et non "hue-rotate(0)".
Et en même temps, si vous pouviez essayer de prendre l'habitude de toujours mettre vos "deg" et "px", ce serait parfait puisque c'est la bonne façon de faire ^^

7. Invert

Premièrement, à quoi sert le filtre Invert? Eh bien ce filtre va servir mettre un filtre qui inverse les couleurs et teintes de l'image. Le vert devient rouge, le mauve devient jaune, le orange devient bleu, les couleurs foncées deviennent pâles, le blanc devient noir, etc. D'ailleurs, voici un exemple :



Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "0", à savoir qu'aucun filtre n'est appliqué et que l'image a son apparence normale.
> La valeur maximale est de "1", à savoir que les teintes et couleurs de l'image sont complètement inversées.
> En choisissant une valeur entre "0" et "1", les couleurs et teintes de l'image seront de plus en plus inversées au fur et à mesure qu'on se rapproche du "1".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: invert(1);" pour que les teintes et couleurs de l'image soient inversées.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: invert(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son apparence normale.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.nom_de_la_class:hover {
  -webkit-filter: invert(0);
  filter: invert(0);
}

8. Brightness (Luminosité)

Premièrement, à quoi sert le filtre Brightness? Eh bien ce filtre va servir à augmenter ou diminuer la luminosité de votre image. D'ailleurs, voici un exemple :



Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que la luminosité est normale.
> En mettant une valeur de "0", l'image n'aura plus aucune luminosité et sera complètement noire.
> Plus on choisit une valeur élevée au-delà de "1", plus l'image sera lumineuse.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2);" pour augmenter ma luminosité à 200%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: brightness(2);
  filter: brightness(2);
}

.nom_de_la_class:hover {
  -webkit-filter: brightness(1);
  filter: brightness(1);
}

9. Contrast (Contraste)

Premièrement, à quoi sert le filtre Contrast? Eh bien ce filtre va servir à augmenter ou diminuer le contraste de votre image. D'ailleurs, voici un exemple :



Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que le contraste est normal.
> En mettant une valeur de "0", l'image n'aura plus aucun contraste et sera complètement gris.
> Plus on choisit une valeur élevée au-delà de "1", plus l'image sera contrastée.

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: contrast(2);" pour augmenter mon contraste à 200%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: contrast(1);" pour qu'au survol, le filtre se dissipe et que l'image reprenne son contraste normal à 100%.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: contrast(2);
  filter: contrast(2);
}

.nom_de_la_class:hover {
  -webkit-filter: contrast(1);
  filter: contrast(1);
}

10. Opacity (Opacité)

Premièrement, à quoi sert le filtre Opacity? Eh bien ce filtre va servir à augmenter ou diminuer l'opacité de votre image. D'ailleurs, voici un exemple :



Ce filtre est l'exception qui confirme la règle :
Il fonctionne sur tous les navigateurs !
Il peut être utilisé sur d'autres choses que des images (sur des divs par exemple) !
La propriété qu'on met dans le CSS n'a pas le même format que les autres filtres. Vous en verrez un exemple plus bas.

Oh, et comment on fait pour déterminer si le filtre est là, pas là ou à moitié là?
> Par défaut, l'image a une valeur de "1", à savoir que l'image a son opacity normale.
> En mettant une valeur de "0", l'image n'aura plus aucune opacité et sera transparente.
> En choisissant une valeur entre "0" et "1", l'image sera de plus en plus transparente au fur et à mesure qu'on se rapproche du "0".

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "opacity: 0.5;" pour rendre mon image transparente à 50%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "opacity: 1;" pour qu'au survol, le filtre se dissipe et que l'image reprenne son opacité normale.

Exemple :

Code:

.nom_de_la_class {
  opacity: 0.5;
}

.nom_de_la_class:hover {
  opacity: 1;
}

Oui oui, j'y venais ^^
Comme ce filtre s'applique ailleurs que sur des images et est plutôt assez utilisé, tous les navigateurs l'ont intégré, sans passer par un filtre normal.
Du coup, à la place du format habituel qui est "filter: type(valeur)", on a simplement "type : valeur".
Cela fonctionne pour Firefox, Safari, Internet Explorer, Chrome et Opéra.

11. Drop-Shadow

Premièrement, à quoi sert le filtre Drop-Shadow? Eh bien, est-ce que vous êtes familiers avec le Box-Shadow? Là où on peut mettre une ombre autour d'une image (ou div)? Eh bien quand on utilise le Box-Shadow sur une image png, cela fait un ombre autour du cadre de l'image. Le Drop-Shadow, lui, sera capable de faire la différence entre le "vide" de l'image et le "contenu" de l'image pour mettre l'ombre juste sur le vrai contenu de l'image.

D'ailleurs, voici un exemple Box-Shadow vs Drop-Shadow :




Ça n'a pas l'air d'être des valeurs comme les autres... Cela fonctionne comment?
> Il y a comme d'habitude le "filter" qui est la propriété.
> Ensuite, on a encore le "drop-shadow" qui est le type.
> Dans la valeur entre parenthèse, le premier "#px" correspond au décalage de l'ombre vers le droite.
> Dans la valeur entre parenthèse, le deuxième"#px" correspond au décalage de l'ombre vers le bas.
> Dans la valeur entre parenthèse, le troisième "#px" correspond au flou de l'ombre.
> Dans la valeur entre parenthèse, la couleur à la fin correspond à la couleur de l'ombre.
=> Cela donne "filter: drop-shadow(#px #px #px couleur)"

Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencé par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: drop-shadow(5px 5px 2px #545454);" pour mettre une ombre de 5px sur la gauche, de 5px vers le bas, d'un flou de 2px et de couleur #545454.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" en lui donnant la propriété "filter: drop-shadow(8px 8px 3px #545454);" changer pour que l'ombre soit de 8px sur la gauche, de 8px vers le bas, d'un flou de 3px et de couleur #545454.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: drop-shadow(5px 5px 2px #545454);
  filter: drop-shadow(5px 5px 2px #545454);
}

.nom_de_la_class:hover {
  -webkit-filter: drop-shadow(8px 8px 3px #545454);
  filter: drop-shadow(8px 8px 3px #545454);
}

12. Faire un effet progressif

Vous savez maintenant comment utiliser les 10 types de filtres. Vous savez même comment mettre un effet différent lorsqu'on survole l'image à l'aide de la pseudo-class "hover".

Mais comment je fais si je veux que l'effet soit progressif quand je survole l'image?
> Nous allons rajouter la propriété "transition" à la class de notre image dans notre CSS.
> La propriété transition se décompose comme ceci : "transition: #s;".
> Nous avons donc la propriété "transition", puis la valeur en secondes qui indiquent la durée de la transition.

Prenons mon premier filtre comme exemple, à savoir celui Greyscale. Nous avons actuellement le code suivant :

Code:

.nom_de_la_class {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.nom_de_la_class:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

Pour que l'effet soit progressif, on va rajouter la propriété transition comme ceci "transition: 1s;" pour que la durée de la transition soit de 1 seconde. Pour mettre ½ seconde, on aurait mis "transition: 0.5s;" et pour mettre 3 secondes on aurait mis "transition: 3s;".

Résultat avec une transition de 1 seconde :

Code:

.nom_de_la_class {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition: 1s;
  transition: 1s;
}

.nom_de_la_class:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

13. Additionner plusieurs filtres

Maintenant qu'on sait comment utiliser les filtres et comment faire pour que l'effet du filtre se fasse de façon progressive, voyons comment appliquer plusieurs filtres à une même image

D'ailleurs, voici un exemple où on additionne les filtres Brightness (Luminosité) et Sepia :




Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2) sepia(1);" pour augmenter ma luminosité à 200% et pour que l'image ressemble à une vieille photographie.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1) sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale et apparence normale.

Comme vous le constatez, dans ma propriété "filter", j'ai séparé les différents "types" (brightness et sepia) avec un simple espace.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: brightness(2) sepia(1);
  filter: brightness(2) sepia(1);
}

.nom_de_la_class:hover {
  -webkit-filter: brightness(1) sepia(0);
  filter: brightness(1) sepia(0);
}

C'est simple comme ça?
Oui, c'est tout simplement cela! Il y a une seule exception, soit l'opacité qui se met dans une propriété à part.

---

Petit exemple avec l'Opacité ajouté en plus de Brightness et Sepia :




Et comment j'ai fait pour l'appliquer sur mon image dans l'exemple?
1. Eh bien j'ai commencer par mettre une image à l'endroit que je veux en lui donnant une "class".
2. Dans mon CSS, j'ai mis la class de mon image en lui donnant la propriété "filter: brightness(2) sepia(1);" pour augmenter ma luminosité à 200% et pour que l'image ressemble à une vieille photographie. J'ai également mis la propriété "opacity: 0.5;" pour baisser l'opacité de mon image à 50%.
3. Dans mon CSS, j'ai mis la class de mon image avec un "hover" avec la propriété "filter: brightness(1) sepia(0);" pour qu'au survol, le filtre se dissipe et que l'image reprenne sa luminosité normale et apparence normale. J'ai également mis la propriété "opacity: 1;" pour remettre l'opacité de mon image à 100%.

Exemple :

Code:

.nom_de_la_class {
  -webkit-filter: brightness(2) sepia(1);
  filter: brightness(2) sepia(1);
  opacity: 0.5;
}

.nom_de_la_class:hover {
  -webkit-filter: brightness(1) sepia(0);
  filter: brightness(1) sepia(0);
  opacity: 1;
}

Conclusion

Voilà, j'espère que cela a pu vous aider. Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Un problème avec un tutoriel".

À plus !