Ajoutez des filtres sur vos images en CSS

Quelques idées de filtres  à appliquer en css

N’hésitez pas à profiter des propriétés CSS3 pour ajouter quelques effets sur votre site web, de manière à favoriser l’interaction et le webdesign de votre site ainsi que l’expérience utilisateur.
La propriété filter permet de créer des effets sur n’importe quel élément html. Il existe plusieurs spécificités de filtres en utilisant différentes valeurs :

Les filtres de couleurs

grayscale
sepia
saturate 
invert
brightness
contrast
opacity

Les filtres de transformation

blur
drop-shadow

Pour les valeurs de ces propriétés, vous avez même la possibilité d’aller plus loin, en les animant grâce à la propriété transition ou aux déclarations d’animation css (@keyframe).
La fonction drop-shadow est particulièrement intéressante. Contrairement à la propriété box-shadow (qui se contente de faire une ombre rectangulaire autour d’un élément), le filtre CSS drop-shadow s’adapte aux formes.

Transition css, un effet toujours utile

effet grayscale
effet sepia
effet blur
effet drop-shadow
effet opacity
effet invert
effet opacity
effet brightness
effet contrast

 

 

VOIR AUSSI
Partagez ce contenu !Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone
Votes sur cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *