La propriété CSS "filter"
CSS3 nous propose quantité de possibilités pour agrémenter nos sites web. Parmi elles aujourd'hui, je tiens particulièrement à vous présenter la propriété filter. Celle ci propose de réaliser des effets d'image en temps réel et normalement obtenu à travers des logiciels de retouche photo.
Le support n'étant pas encore totalement accepté en CSS3 il sera nécessaire de préciser (même sur un navigateur moderne début 2015) une entrée spécifique pour les navigateurs à base de webkit (comme Google Chrome).
filter: blur(3px); -webkit-filter: blur(3px);
Voici la liste (non exhaustive) des effets supportés
- Flou = blur()
- Luminosité = brightness()
- Constraste = contrast()
- Noir et blanc (désaturation) = grayscale()
- Rotation de la roue chromatique = hue-rotate()
- Inversion (négatif) = invert()
- Opacité (transparence) = opacity()
- Sepia (effet vieille photo) = sepia()
Je vous propose de retrouver ci-dessous une petite application qui vous montrera en temps réel le résultat des effets et valeurs choisies sur une image.
Amusez-vous...
