Ajouter des filtres CSS façon Instagram à vos images

08.07.2019 | Elliott Chiaradia

Les filtres d'image en CSS
1. Leurs avantages
2. Leurs désavantages
Cas pratiques
Compatibilité navigateur
Bonus : Faire des choses cool avec les ombres portées
Sources

Les filtres d’image en CSS

Popularisé notamment par Instagram, améliorer nos photos à l’aide de filtres est devenu monnaie courante. Son succès vient non-seulement du fait que nous vivons plus que jamais dans une société d’images, une société où il est important d’exposer de jolis clichés, mais également du fait qu’ils sont à la portée de toutes et tous ! En effet, ajouter un filtre sur une application comme Instagram est simple comme bonjour !

Afin d’être en accord avec son temps, le CSS évolue lui aussi. Nous avons pu voir émerger la propriété filter. Vous l’avez compris, c’est grâce à celle-ci nous allons pouvoir ajouter des filtres "à la Instagram" à nos images. Et ceci sans devoir y passer des heures !

Bien qu’il soit tout à fait possible d’utiliser la propriété filter manuellement, en l’intégrant dans les feuilles de styles et en effectuant quelques réglages, il existe une librairie CSS contenant déjà des filtres préconstruits. Ceux-ci sont grandement inspirés des filtres présents dans l’application Instagram. Donc si vous avez l’habitude de les utiliser, vous ne serez pas dépaysé.

De plus, il existe également un générateur de filtres online. Grâce à celui, vous n’aurez pas besoin d’écrire une seule ligne de code vous-même, et vous pourrez instantanément avoir un aperçu de vos résultats.

Bref ! C’est bien joli tout ça, mais faut-il toujours utiliser ces filtres CSS ? Pour répondre à cette question, je vous invite à consulter leurs avantages et désavantages, afin que vous puissiez vous faire votre propre avis.

Leurs avantages

L’uniformité est sans aucun doute l’un des points les plus pertinents. En effet, si vous êtes plusieurs éditeurs à travailler sur une même plateforme web et à y ajouter différentes images, il peut arriver que celles-ci soient très disparates, ce qui aura pour effet de donner un aspect non-professionnel à votre site. Appliquer des filtres de manière automatique et invisible pour l’éditeur peut résoudre ce problème en rendant le tout bien plus uniforme.
Vous n’avez pas besoin de vous y connaître en logiciel de traitement d’images (comme Photoshop pour n’en citer qu’un). Les filtres sont très « UserFriendly », ce qui est d’autant plus vrai si nous utilisons le générateur online.
L’image d’origine est conservée. En effet, le filtre CSS est ajouté par-dessus votre cliché, celui-ci n’est donc pas réellement modifié.
Comme dernier point, je citerai la facilité d’intégration. Que ça soit manuellement, via une librairie CSS ou encore en utilisant un générateur, ajouter des filtres CSS à votre projet web est accessible à toutes et à tous.

Leurs désavantages

Bien que les filtres d’images en CSS offre une extraordinaire liberté, travailler une image avec un logiciel de traitement d’images (comme Photoshop), peut offrir encore plus de possibilités.
Qui dit code CSS dit ressources navigateur. Effectivement, celui-ci doit « travailler » pour afficher les filtres, ce qui a pour effet de ralentir très faiblement (mais très faiblement quand même!), le chargement de votre site.
Bien que fonctionnant sur tous les navigateurs modernes, la propriété « filter » ne fonctionne pas sur Internet Explorer. Sur IE, les images ayant des filtres seront donc affichées comme si elles n’en avaient pas.

Cas pratique

Pour imager ces cas pratiques, nous allons utiliser une magnifique photo de la Namibie prise par Ashim D’Silva.

A la main, avec la propriété filter

Il suffit de créer une classe, puis de lui définir la propriété filter en spécifiant l’effet et son pourcentage. Par exemple, si nous voulons ajouter un filtre noir et blanc :

.filtre1
{
        filter: grayscale(100%);
}

Puis, dans notre code HTML, nous ajoutons la classe à notre image.

<img class="filtre1" src="namibia.jpg" />

Résultat :

Voici la liste des effets de filtre disponibles :

La luminosité : brightness()
Le contraste : contrast()
Le Grayscale : grayscale()
L’opacité : opacity()
Le Sepia : sepia()
La saturation : saturate()
Le flou : blur()
La teinte de rotation : hue-rotate()
L’inversion : invert()
L’ombre portée : drop-shadow()

Pour utiliser plusieurs effets de filtre, il suffit de les séparer par un espace :

.filtre2
{
	filter: hue-rotate(-40deg) saturate(80%);
}

<img class="filtre2" src="namibia.jpg" />

Et voici le résultat !

Sympa non ? Maintenant je vais vous laisser vous amuser avec ces différents réglages :)

La librairie CSSGram

Il existe une petite librairie CSS proposant des filtres déjà tout prêts, inspirés d’Instagram. Ça vous intéresse ?

Pour appeler la librairie CSSGram, vous pouvez utiliser le CDN (à mettre dans le <head>)

<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

Ou télécharger la librairie via ce lien, l’enregistrer dans votre projet et l’appeler (toujours dans le <head>) comme une feuille de styles standard :

<link rel="stylesheet" href="cssgram.min.css">

Il vous suffit d’appeler la classe correspondant au filtre que vous voulez utiliser au sein de votre balise image.

<img class="aden" src="namibia.jpg" />

Voici la liste des classes disponibles :

1977: class="_1977"
Aden: class="aden"
Brannan: class="brannan"
Brooklyn: class="brooklyn"
Clarendon: class="clarendon"
Earlybird: class="earlybird"
Gingham: class="gingham"
Hudson: class="hudson"
Inkwell: class="inkwell"
Kelvin: class="kelvin"
Lark: class="lark"
Lo-Fi: class="lofi"
Maven: class="maven"
Mayfair: class="mayfair"
Moon: class="moon"
Nashville: class="nashville"
Perpetua: class="perpetua"
Reyes: class="reyes"
Rise: class="rise"
Slumber: class="slumber"
Stinson: class="stinson"
Toaster: class="toaster"
Valencia: class="valencia"
Walden: class="walden"
Willow: class="willow"
X-pro II: class="xpro2"

Pour avoir un aperçu de ces différents filtres, n’hésitez pas à jeter un œil au site de CSSGram : https://una.im/CSSgram/

Générateur de filtres

Un générateur visuel de filtres, pratique non ? De plus est, sa facilité d’utilisation est exemplaire. Alors pourquoi vous en priver ?

Rendez-vous sur https://www.cssfilters.co/, puis sélectionnez le preset que vous désirez (oui, ces presets proviennent de la librairie CSSGram que nous avons vu précédemment :) )

Vous pouvez maintenant jouer avec les effets de filtre disponibles à droite. Vous aurez même droit à un aperçu en temps réel. Vous pouvez également uploader (« téléverser » en bon français) votre propre image, afin d’avoir une idée précise de ce que donnerait votre filtre, utile non ?

Dès que le résultat de votre mélange d’effets vous convient, il vous suffit de cliquer sur « CSS Code » (à droite) et de copier le code source CSS et HTML. Vous pouvez bien évidemment faire des ajustements par vous-même, si vous ne désirez pas utiliser la balise HTML <figure> par exemple.

Compatibilité navigateur

Et là vous allez me dire, c’est bien joli ces filtres mais qu’en est-il de leurs compatibilités avec les navigateurs ? Et bien tous les navigateurs récents comprennent la propriété CSS filter, sauf … Internet Explorer ! Bien évidemment …

Voici la liste des versions compatibles :

Google Chrome : à partir de la version 43
Mozilla Firefox : à partir de la version 38
Opera : à partir de la version 32
Safari : à partir de la version 9
Edge : à partir de la version 12
Internet Explorer : Non compatible

Suivant les versions de navigateur, il faut parfois ajouter le préfixe : -webkit- à la propriété filter.

Bonus : Faire des choses cool avec les ombres portées

L’effet drop-shadow() (ombre portée), de la propriété CSS filter, permet de faire des choses assez surprenantes avec des images en PNG, découpées avec de la transparence. Prenons par exemple cette illustration d’un Power Glove.

Ajoutons-lui un filtre avec une ombre portée rose.

.filtre3{
  	filter: drop-shadow(10px 6px 1px pink);
}

<img class="filtre3" src="powerglove.png" />

Et voici le résultat !

C’est fou non ? Et tout ça en CSS ! Plus besoin de demander à votre graphiste de vous créer d’innombrables déclinaisons :)

Modifions un petit peu ce filtre :

.filtre3{
	filter: drop-shadow(0px 0px 5px magenta);
}

Alors, "c’est cool" ? Je ne vous avais pas menti non ? Bref, je tenais à vous présenter ces effets d’ombre portée en guise de bonus, car personnellement ce sont mes petits favoris :)