{"id":5495,"date":"2015-11-21T17:07:22","date_gmt":"2015-11-21T16:07:22","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=5495"},"modified":"2015-11-21T16:52:31","modified_gmt":"2015-11-21T15:52:31","slug":"effet-delave-photos-css","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/effet-delave-photos-css","title":{"rendered":"Un effet d\u00e9lav\u00e9 sur vos photos en CSS"},"content":{"rendered":"

L’effet d\u00e9lav\u00e9 en photographie est tr\u00e8s en vogue en ce moment. Les utilisateurs de ces effets cherchent l’aspect Vintage<\/em>, ils cherchent \u00e0 donner une histoire \u00e0 leurs photos en leur offrant une apparence vieillie, certains utilisent le terme \u00ab\u00a0authentique\u00a0\u00bb. Voyons comment reproduire cet effet \u00e9galement nomm\u00e9 \u00ab\u00a0Vintage Washout<\/em>\u00a0\u00bb en CSS.<\/p>\n

<\/p>\n

Effet recherch\u00e9<\/h2>\n

L’effet recherch\u00e9 est principalement une diminution des contrastes, notamment par la r\u00e9duction de la pr\u00e9sence des fonc\u00e9s. Chaque photo va avoir besoin d’un traitement diff\u00e9rent suivant ses dominantes et son exposition.<\/p>\n

Voil\u00e0 un exemple :<\/p>\n

\"Photo<\/a>
Photo originale<\/figcaption><\/figure>\n
\"Photo<\/a>
Photo d\u00e9lav\u00e9e<\/figcaption><\/figure>\n

Pour effectuer cet effet, il faut bien avoir \u00e0 l’esprit que nous n’allons jouer que sur la luminosit\u00e9 gr\u00e2ce au\u00a0mode de fusion lighten<\/code> en CSS.<\/p>\n

Ce mode de fusion permet de m\u00e9langer deux \u00ab\u00a0canaux\u00a0\u00bb de couleurs en conservant sur chaque canaux les couleurs les plus claires.<\/p>\n

Voir la d\u00e9monstration<\/a><\/p>\n

Comment faire ?<\/h2>\n

Commencez par utiliser le code HTML suivant pour que nous ayons les m\u00eames bases.<\/p>\n

<div class=\"image\"><\/div><\/code><\/pre>\n
Nous allons passer notre image en fond de cette division, et utiliser la propri\u00e9t\u00e9\u00a0background-blend-mode<\/code> pour m\u00e9langer l’image avec une couleur de fond.<\/p>\n
Copiez simplement le code suivant pour votre CSS :<\/p>\n
.image {\r\n\twidth: 800px;\r\n\theight:\u00a0 600px;\r\n\tbackground: url(https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/11\/photo-atelier.jpg), #000;\r\n\tbackground-blend-mode: lighten;\r\n\tbackground-size: contain;\r\n}<\/code><\/pre>\n
Normalement vous ne devriez voir aucune diff\u00e9rence sur l’image, et pour cause, nous avons utilis\u00e9 la couleur de fond #000<\/code> (soit du noir). L’image qui est plac\u00e9e par-dessus cette couleur unie en mode lighten<\/em>, c’est \u00e0 dire en mode \u00ab\u00a0conservation des couleurs les plus claires des deux canaux\u00a0\u00bb, conserve toutes ses couleurs plus claires que le noir… donc toutes \ud83d\ude42<\/p>\n
Maintenant, rempla\u00e7ons le noir par un gris proche du moyen, par exemple #777<\/code>.<\/p>\n
\"Photo<\/a><\/p>\n
L\u00e0 nous avons perdu beaucoup trop de couleurs, il faut \u00eatre plus l\u00e9ger sur la valeur du fonc\u00e9. En tout cas pour cette photo et l’effet que je recherche !<\/p>\n
Aux alentours de #222<\/code> ou #333<\/code> on obtient quelque chose de raisonnable, mais je vous laisser tester.<\/p>\n
Essayons volontairement de ne pas prendre une teinte de gris, mais plut\u00f4t une couleur froide et fonc\u00e9e \u00e0 la fois. J’ai test\u00e9 #123456<\/code> juste pour le fun et aussi parce que \u00e7a donne un bleu assez sympa et suffisamment fonc\u00e9. Nous obtenons exactement l’effet d\u00e9sir\u00e9. Maintenant essayez avec la couleur chaude #654321<\/code>, et comparez.<\/p>\n
\"Comparaison<\/a><\/p>\n
J’ai une nette pr\u00e9f\u00e9rence pour celle de droite.
\nFaire varier la couleur permet de contre-carrer une balance des blancs initiale qui pourrait ne pas nous convenir.<\/p>\n
Et voil\u00e0, vous savez d\u00e9sormais faire un effet d\u00e9lav\u00e9. Facile non ? N’h\u00e9sitez pas \u00e0 vous amuser avec le CodePen que j’ai fait<\/a> pour vous.<\/p>\n
Le m\u00eame effet sur une image de contenu<\/h2>\n
Une fois que vous avez compris le principe avec l’image de fond, il existe deux m\u00e9thodes pour appliquer cet effet \u00e0 des images de contenu. Voil\u00e0 comment proc\u00e9der.<\/p>\n
Le code HTML<\/h3>\n
Pla\u00e7ons simplement notre image dans un conteneur.<\/p>\n
<div class=\"thumbnail\">\r\n\t<img src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2015\/11\/photo-atelier.jpg\" alt=\"\">\r\n<\/div><\/code><\/pre>\n
Le conteneur va nous servir de deux mani\u00e8res diff\u00e9rentes, je vais d\u00e9tailler cela une par une.<\/p>\n
La base CSS<\/h3>\n
Voici le code CSS commun aux deux m\u00e9thodes, on positionne juste notre image et on met une petite bordure de d\u00e9coration \ud83d\ude42<\/p>\n
.thumbnail {\r\n\tposition: relative;\r\n\tmargin: 0 auto;\r\n\twidth: 600px;\r\n\tmax-width: 100%;\r\n\tborder: 3px solid #123456;\r\n\tline-height: 0;\r\n}\r\n.thumbnail img {\r\n\tmax-width: 100%;\r\n\theight: auto;\r\n}<\/code><\/pre>\n
Nos deux solutions vont \u00eatre les suivantes :<\/p>\n
    \n
  1. Appliquer une couleur de fond \u00e0 notre conteneur, et appliquer le mode de fusion \u00e0 notre image.<\/li>\n
  2. Cr\u00e9er un pseudo-element avec :before<\/code> ou :after<\/code>, donner une couleur de fond \u00e0 ce pseudo \u00e9l\u00e9ment et lui appliquer le mode de fusion.<\/li>\n<\/ol>\n
    1 – Couleur de fond du conteneur<\/h3>\n
    C’est la m\u00e9thode que je pr\u00e9f\u00e8re, car si le mode de fusion n’est pas support\u00e9 par le navigateur, on se retrouve simplement avec une image dans un conteneur qui a une couleur de fond, sans autre particularit\u00e9 ou g\u00eane.<\/p>\n
    .thumbnail {\r\n\tbackground: #123456;\r\n}\r\n.thumbnail img {\r\n\tmix-blend-mode: lighten;\r\n}<\/code><\/pre>\n
    C’est tout simple comme vous le voyez. Notre image est m\u00e9lang\u00e9e avec les couleurs inf\u00e9rieures du conteneur.<\/p>\n
    2 – Pseudo \u00e9l\u00e9ment comme calque de fusion<\/h3>\n
    Cette m\u00e9thode permet d’ajouter un \u00e9l\u00e9ment sp\u00e9cifique pour cr\u00e9er un calque de fusion, c’est utile dans le cas o\u00f9 le fond du conteneur est d\u00e9j\u00e0 utilis\u00e9 pour un autre effet, par exemple. Cependant elle a l’inconv\u00e9nient de cr\u00e9er un calque de couleur par dessus l’image.<\/p>\n
    .thumbnail:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0; right: 0; left: 0; bottom: 0;\r\n\tbackground: #123456;\r\n\tmix-blend-mode: lighten;\r\n}<\/code><\/pre>\n
    Mais il existe une alternative en corrigeant le z-index de ces deux \u00e9l\u00e9ments manuellement. On va faire passer notre \u00ab\u00a0calque\u00a0\u00bb de couleur sous l’image, et appliquer le mode de fusion \u00e0 cette derni\u00e8re.<\/p>\n
    .thumbnail:after {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0; right: 0; left: 0; bottom: 0;\r\n\tbackground: #123456;\r\n\tz-index: 1;\r\n}\r\n.thumbnail img {\r\n\tposition: relative;\r\n\tz-index: 2;\r\n\tmix-blend-mode: lighten;\r\n}<\/code><\/pre>\n
    Cela fait un peu plus de code, mais c’est plus s\u00e9curisant de savoir que le visiteur qui a un navigateur un peu vieux aura bien une image \u00e0 la place d’un calque tout bleu \ud83d\ude42<\/p>\n
    Vous pouvez vous amuser avec mon CodePen<\/a>.<\/p>\n
    Amusez-vous bien !<\/p>\n
    Voir la d\u00e9monstration<\/a><\/p>\n
    Sources et inspirations<\/h2>\n