Une nouvelle propriété : filter

Cette page ne s'affiche correctement qu'avec les navigateurs Firefox, Safari et Chrome.

Si vous avez visité le tutoriel "Dessiner avec SVG" vous connaissez les filtres. Vous savez que grâce aux filtres vous pouvez flouter un objet, jaunir une photo, inverser les couleurs, etc.

CSS3 a ajouté la propriété filter qui peut s'appliquer à une image voire à une vidéo.
L'emploi de cette propriété est très souple. On peut définir les filtres simples ou composites en CSS avec une syntaxe très succincte (plus simple qu'en SVG). Mais on peut aussi argumenter la propriété CSS filter avec un filtre défini au format SVG.
Et inversement rien n'interdit d'appliquer un filtre défini en CSS à des objets SVG.
Vous voyez donc que les possibilités sont infinies. C'est pour cette raison que je consacre deux pages à la propriété filter.
Seul bémol : cette propriété n'est pas encore implémentée par Edge. Et pour certains navigateurs il faut préfixer la propriété.

Application d'un filtre à une photo

Photo floutée

Photo avec effet "sepia"

Le code correspondant

<img width = "50%" src ="../images/jolie_fille.jpg" style ="filter : blur(5px); " /> ... <img width = "50%" src ="../images/cheval.jpg" style ="filter : sepia(1); " />

Pour flouter une image il faut utiliser la commande blur() avec en paramètre une valeur en pixels (px). Plus la valeur est grande et plus l'image sera floue.

Pour vieillir une photo il faut utiliser la commande sepia avec en paramètre une valeur décimale comprise entre 0 et 1.

Attention au moment où je mets à jour cette page () il n'est plus nécessaire de préfixer la propriété filter avec les navigateurs Firefox, Chrome et Safari.

Application d'un filtre à une vidéo

Les filtres CSS peuvent s'appliquer non seulement à des photos mais aussi à des vidéos.

Une vidéo avec effet "sepia"

Le code correspondant

<video width = '60%' height ='auto' controls src = "../audio_video/epave.mp4" style ="filter : sepia(1); " />

Appliquer un filtre à un élément block (une boîte)

Deux boîtes : l'une floutée et l'autre avec l'effet "sepia"

Le code correspondant

<div style ="width : 80%; height : 200px ; margin : 10px auto 10px auto ; background : chocolate ; filter : blur(4px); "></div> <div style ="width : 80%; height : 200px ; margin : 10px auto 10px auto ; background : chocolate ; filter : sepia(1); "></div>

Dans la page suivante je vous indique toutes les commandes possibles de la propriété filter.
Je vous montrerai aussi que vous pouvez produire des filtres composites.
Retour menu