Logo Coding Days
Professionnel
ProfessionnelNous découvrirNos formations
ÉvénementsBlogPlateformeSoon
HTML CSS

Comment ajouter des filtres "Instagram" à vos photos en 5 minutes ?

Florian Michaut
Florian Michaut
Lead Developer
Lun 29
Avril 2019
3mn
de lecture

Introduction

Vous souhaitez agrémenter votre site ou blog de visuels pour illustrer vos propos, ou tout simplement pour faire beau ? Très bonne idée !

Sachez qu'il est recommandé de créer une image de marque cohérente ou, a minima, de 'lisser' le design global. Pour cela, mieux vaut respecter une charte graphique et certaines règles. Pour que vos images aient toutes le même style, pourquoi ne pas leur ajouter des filtres "Instagram" ?

Il serait fastidieux de passer sur chacune des images pour rajouter ce filtre. Pourquoi passer du temps sur Photoshop ou tout autre outil alors que le code peut le faire automatiquement pour vous ?

Il y a plusieurs techniques possibles. Aujourd'hui, nous verrons celle utilisant le "CSS".

🙌 Difficulté

🐤 Un de peu code, sans être développeur pour autant !

Outils

  • cssFilters.co est un site qui vous permet de créer vos filtres.

Pas de panique, Cody t'explique !

Le CSS (Cascading Style Sheet) est le language informatique qui décrit la représentation graphique des documents HTML (autrement dit, des pages web).

On peut donc customiser toute sorte d'éléments d'une page web, que ce soit un titre, un lien, des paragraphes ou des images et bien plus encore... On peut alors changer pas mal de choses : couleurs, position, bordures, fonds, et même la forme d'un élément !

Nous, nous allons customiser les couleurs d'une image avec la propriété CSS : filter. Instagram est vraiment à portée de clavier ! Et pas besoin d'être un expert en CSS.

Vous êtes prêts ?

Le tuto

Ce site est gratuit et vous permet de choisir entre plusieurs filtre déjà créés pour vous. Vous pouvez tout aussi bien le créer vous même.

  • Étape 2 : Choisissez une image en cliquant sur Upload an Image

  • Étape 3 : Puis glisser-déposer l'image de votre choix

  • Étape 4 : Choisissez des filtres en haut pour prévisualiser le rendu - ou - jouez avec le menu de droite en changeant les paramètres
  • Étape 5 : Une fois que le rendu vous plait, vous pouvez cliquer sur CSS Code, en haut à droite

Étape 6 : Vous avez alors le code à utiliser pour ajouter votre filtres à vos images.

  • Étape 7 : Utiliser ce code sur votre site / blog

Que vous soyez sur Wix, Instapage, Wordpress, vous pouvez toujours insérer ce code. Soit dynamiquement, soit manuellement. Dans tout les cas, ajouter le CSS une seule fois. Puis pour chaque image que vous souhaitez styliser, entourez là simplement de la balise figure avec l'attribut ****class ****et sa valeur "filter".

****Voici une démo d'exemple :

https://codepen.io/n44ps/pen/wZPLXK

C'est pas beau ça ? Nos petits canards sont encore plus mignons et enfin prêts pour de beaux duck-faces !

sitewebsiteblogimagephotofiltreinstagramcss
Design

Comment créer un logo unique sans graphiste en 10 minutes

Vous rêvez de lancer votre site en ligne et souhaitez lui donner une identité unique et sympa ?

28 avril10mn
Émilie RehmannÉmilie Rehmann