Pour animer un peu vos sites web, nous allons vous montrer comment faire des effets sur vos images à l’aide des filtres en CSS3.
- grayscale : niveau de gris
- sepia : effet sépia
- blur : effet de flou
- drop-shadow : ombre portée
- saturate : saturation
- hue-rotate : teinte
- invert : effet négatif
- opacity : opacité
- brightness : luminosité
- contrast : contraste
Grayscale
L’image utilisée est une image en couleur sur laquelle on applique un filtre « noir & blanc ».
Ce filtre se retire quand on survole l’image. La valeur du filtre est comprise entre 0 (image originale) et 1 (noir et blanc). On peut aussi l’exprimer en %.
Sepia
L’image utilisée est une image en couleur sur laquelle on applique un filtre « sépia ».
Ce filtre se retire quand on survole l’image. La valeur du filtre est comprise entre 0 (image originale) et 1 (noir et blanc). On peut aussi l’exprimer en %.
Blur
Ici, nous utilisons une photo nette sur laquelle on applique un filtre flou.
Ce filtre se retire quand on survole l’image. La valeur du filtre s’exprime en pixel, plus le chiffre est élevé, plus l’image est floue.
Pour la suite vous pouvez aller sur les sites