{"id":5493,"date":"2016-03-02T13:37:14","date_gmt":"2016-03-02T12:37:14","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=5493"},"modified":"2016-10-01T23:49:15","modified_gmt":"2016-10-01T21:49:15","slug":"effet-lomographie-css","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css","title":{"rendered":"Un effet lomographie en CSS"},"content":{"rendered":"<p>Apr\u00e8s un petit article sur l&rsquo;<a href=\"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/effet-delave-photos-css\">effet vintage en CSS<\/a>, voici une autre id\u00e9e de l&rsquo;exploitation des filtres CSS sur vos images gr\u00e2ce \u00e0 la cr\u00e9ation d&rsquo;un effet lomographie. Cet effet a tendance \u00e0 augmenter les contrastes et la saturation des couleurs de la photo elle-m\u00eame, ou d&rsquo;un d\u00e9grad\u00e9 de couleurs, et peut parfois proposer des fusions d&rsquo;images (par double exposition).<\/p>\n<p><!--more--><\/p>\n<h2>Les effets de base<\/h2>\n<p>L&rsquo;effet lomographie plait, ou ne plait pas. Je sais que c&rsquo;est un style qui ne parle pas \u00e0 tout le monde, mais le but ici est de vous proposer de travailler une image sur la base d&rsquo;un objectif pr\u00e9cis, qui sera ici la reproduction de cet effet.<\/p>\n<h3>Analyse d&rsquo;une photo<\/h3>\n<p>Pour le reproduire, essayons d&rsquo;analyser ces deux photographies et de rep\u00e9rer les diff\u00e9rences.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-compare-images.jpg\" rel=\"attachment wp-att-5721\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-5721\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-compare-images.jpg\" alt=\"Un chien, l'original \u00e0 gauche, l'effet lomographie \u00e0 droite.\" width=\"1920\" height=\"688\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-compare-images.jpg 1920w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-compare-images-300x108.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-compare-images-768x275.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-compare-images-600x215.jpg 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<p>Ce qui saute aux yeux globalement :<\/p>\n<ul>\n<li>Les couleurs sont plus vives,<\/li>\n<li>Les contrastes sont plus forts,<\/li>\n<li>On dirait que la photo est floue (l\u00e9g\u00e8rement)<\/li>\n<\/ul>\n<p>Ce qui est peut-\u00eatre moins visible :<\/p>\n<ul>\n<li>Les couleurs semblent modifi\u00e9es globalement<\/li>\n<li>Les couleurs semblent d\u00e9grad\u00e9es par endroit<\/li>\n<li>Il y a du vignettage<\/li>\n<\/ul>\n<p>En partant de cette analyse, essayons de traduire cela en code.<\/p>\n<h3>Parlons peu, parlons code<\/h3>\n<p>Afin de manipuler la photo, je vais l&rsquo;ins\u00e9rer dans un \u00e9l\u00e9ment neutre <code>div<\/code>, mais il est possible d&rsquo;utiliser <code>figure<\/code> ou <code>span<\/code>, ou m\u00eame un lien suivant la situation dans laquelle vous vous trouvez.<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;div class=\"lomo\"&gt;\r\n\t&lt;img src=\"mon\/image.jpg\" width=\"800\" height=\"600\" alt=\"\"&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>Place aux styles qui sautent aux yeux. Pour la photo de l&rsquo;exemple, j&rsquo;ai eu besoin des filtres suivants.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.lomo img {\r\n\tfilter: saturate(1.5) contrast(1.3) blur(0.2px);\r\n}<\/code><\/pre>\n<p>Comme vous le voyez, on peut ajouter autant de filtre que d\u00e9sir\u00e9, il suffit d&rsquo;utiliser les unes \u00e0 la suite des autres les fonctions utiles s\u00e9par\u00e9es par un espace.<br \/>\nSi vous n&rsquo;\u00eates pas fan du flou, retirez simplement la fonction <code>blur()<\/code>. Cela nous donne une photo aux contrastes et couleurs r\u00e9hauss\u00e9s en quelques lignes de CSS.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-contrast-saturate.jpg\" rel=\"attachment wp-att-5722\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-5722\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-contrast-saturate.jpg\" alt=\"Le photo avec plus de contraste et saturation\" width=\"1799\" height=\"1294\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-contrast-saturate.jpg 1799w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-contrast-saturate-300x216.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-contrast-saturate-768x552.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-contrast-saturate-600x432.jpg 600w\" sizes=\"(max-width: 1799px) 100vw, 1799px\" \/><\/a><\/p>\n<p>Personnellement, je trouve ce r\u00e9sultat un peu sombre, je rajoute donc un peu d&rsquo;\u00e9clat gr\u00e2ce \u00e0 la fonction <code>brightness(1.1)<\/code>.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.lomo img {\r\n\tfilter: saturate(1.5) contrast(1.3) blur(0.2px) brightness(1.1);\r\n}<\/code><\/pre>\n<p>J&rsquo;ai \u00e9galement utilis\u00e9 la fonction <code>hue-rotate(-5deg)<\/code> qui me permet, dans le cas de cette image, de glisser l&rsquo;<strong>ensemble des couleurs<\/strong> vers un tout petit peu plus de rouge. (je l&rsquo;ai fait en testant des valeurs, par empirisme) Je vous laisse compl\u00e9ter le code en cons\u00e9quence \ud83d\ude09<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-brightness.jpg\" rel=\"attachment wp-att-5720\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-5720\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-brightness.jpg\" alt=\"La photo avec plus de luminosit\u00e9\" width=\"1799\" height=\"1294\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-brightness.jpg 1799w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-brightness-300x216.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-brightness-768x552.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-brightness-600x432.jpg 600w\" sizes=\"(max-width: 1799px) 100vw, 1799px\" \/><\/a><\/p>\n<p>Enfin, le plus fun, appliquer des t\u00e2ches de couleurs, comme une re-colorisation ou d\u00e9-colorisation de certaines zones, ou encore une double exposition avec une autre photo\u2026 Testons \u00e7a.<\/p>\n<h3>La double exposition<\/h3>\n<p>Nous allons positionner la div conteneur afin de g\u00e9n\u00e9rer un contenu gr\u00e2ce \u00e0 un pseudo-\u00e9l\u00e9ment. Voici la marche \u00e0 suivre.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.lomo {\r\n\tposition: relative;\r\n}<\/code><\/pre>\n<p>Puis nous cr\u00e9ons le pseudo-\u00e9l\u00e9ment qui va couvrir toute l&rsquo;image.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.lomo::after, .lomo::before {\r\n\tcontent: \"\";\r\n\tposition: absolute;\r\n\ttop: 0; right: 0;\r\n\tbottom: 0; left: 0;\r\n}<\/code><\/pre>\n<p>En transparence (pour le moment) nous avons donc deux pseudo-\u00e9l\u00e9ments par-dessus notre image. Si vous voulez vous en assurer, ajoutez un <code>background: red;<\/code> vous verrez.<br \/>\nNous allons ajouter deux d\u00e9grad\u00e9s radiaux en un gr\u00e2ce aux backgrounds multiples et \u00e0 la fonction <code>radial-gradient()<\/code>.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.lomo::after {\r\n\tbackground:\r\n\t\tradial-gradient(500px circle at 30% 10%, rgba(255,255,0,1), rgba(255,255,255,0)),\r\n\t\tradial-gradient(300px circle at 80% 60%, rgba(200,255,147,1), rgba(255,255,255,0));\r\n}<\/code><\/pre>\n<p>Le premier d\u00e9grad\u00e9 est un jaune d&rsquo;une \u00e9tendue de 500px sur une forme de cercle plac\u00e9 \u00e0 30% de la gauche de l&rsquo;image et 10% du haut. Je vous laisse interpr\u00e9ter le second d\u00e9grad\u00e9 qui est un jaune-vert.<\/p>\n<p>Si on en reste l\u00e0, c&rsquo;est joli, mais on recherche quelque chose de plus incrust\u00e9. Vous vous souvenez des propri\u00e9t\u00e9s de fusion utilis\u00e9es sur l&rsquo;article <a href=\"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/effet-delave-photos-css\">Un effet d\u00e9lav\u00e9 sur vos photos<\/a> ? Nous allons r\u00e9-utiliser cette propri\u00e9t\u00e9.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.lomo::after {\r\n\tmix-blend-mode: overlay;\r\n\topacity: .8;\r\n}<\/code><\/pre>\n<p>J&rsquo;ai tout de suite baiss\u00e9 l&rsquo;opacit\u00e9 car je trouvais l&rsquo;effet trop agressif.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-gradient-blend-mode.jpg\" rel=\"attachment wp-att-5723\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-5723\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-gradient-blend-mode.jpg\" alt=\"lomography-css-filter-gradient-blend-mode\" width=\"1799\" height=\"1294\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-gradient-blend-mode.jpg 1799w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-gradient-blend-mode-300x216.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-gradient-blend-mode-768x552.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-gradient-blend-mode-600x432.jpg 600w\" sizes=\"(max-width: 1799px) 100vw, 1799px\" \/><\/a><\/p>\n<p>Il ne reste plus qu&rsquo;\u00e0 utiliser notre second pseudo-\u00e9l\u00e9ment pour cr\u00e9er le vignettage.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.lomo::before {\r\n\tz-index: 1;\r\n\tbackground: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%,  rgba(0,0,0,0) 50%, rgba(0,0,0,.5));\r\n}<\/code><\/pre>\n<p>Le z-index ici permet de passer ce pseudo-\u00e9l\u00e9ment au-dessus du reste afin de bien tout vignetter. Notre d\u00e9grad\u00e9 radial prend sa source en plein centre de l&rsquo;image, commence par une couleur noire compl\u00e8tement transparente jusqu&rsquo;\u00e0 50% de son \u00e9tendue, puis fini \u00e0 50% d&rsquo;opacit\u00e9 sur les bords de l&rsquo;image.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-vignette.jpg\" rel=\"attachment wp-att-5725\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-5725\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-vignette.jpg\" alt=\"La photo avec une vignette\" width=\"1799\" height=\"1294\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-vignette.jpg 1799w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-vignette-300x216.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-vignette-768x552.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-vignette-600x432.jpg 600w\" sizes=\"(max-width: 1799px) 100vw, 1799px\" \/><\/a><\/p>\n<p>Notre effet lomographie est termin\u00e9 pour cet exemple.<br \/>\nRetrouvez le code sur CodePen pour le modifier en live si vous le souhaitez :<\/p>\n<p style=\"text-align: center;\"><a class=\"demo\" href=\"http:\/\/codepen.io\/CreativeJuiz\/pen\/qZBypv\">Effet lomographie<\/a><\/p>\n<h2 style=\"text-align: left;\">Double exposition photo<\/h2>\n<p>Tentons d&rsquo;ajouter \u00e0 tout cela un m\u00e9lange avec une autre photo, une double exposition. J&rsquo;ai chop\u00e9 ce fond d&rsquo;\u00e9cran sur un site qui en fournit \u00e0 la pelle. Le rouge est int\u00e9ressant ici car nous n&rsquo;en avons pas sur notre photo.<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/red-artefact.jpg\" rel=\"attachment wp-att-5728\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-5728\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/red-artefact.jpg\" alt=\"red-artefact\" width=\"1425\" height=\"1025\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/red-artefact.jpg 1425w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/red-artefact-300x216.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/red-artefact-768x552.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/red-artefact-600x432.jpg 600w\" sizes=\"(max-width: 1425px) 100vw, 1425px\" \/><\/a><\/p>\n<p>Dans mon code HTML, j&rsquo;ajoute cette photo juste apr\u00e8s l&rsquo;image principale, comme ceci :<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;div class=\"lomo\"&gt;\r\n\t&lt;img src=\"mon\/image.jpg\" width=\"800\" height=\"600\" alt=\"\"&gt;\r\n&lt;img src=\"ma\/fusion.jpg\" width=\"800\" height=\"600\" alt=\"\" class=\"lomo-double\"&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>J&rsquo;ai simplement ajout\u00e9 une classe sur cette photo pour la distinguer de l&rsquo;autre. Ainsi je vais pouvoir la placer au-dessus et lui appliquer un mode de fusion pour la \u00ab\u00a0m\u00e9langer\u00a0\u00bb \u00e0 notre photo principale.<\/p>\n<p class=\"message\">Note : les filtres pr\u00e9c\u00e9demment appliqu\u00e9s sur notre photo principale sont \u00e9galement appliqu\u00e9 sur notre photo \u00e0 fusionner. Ce n&rsquo;est pas grave, et vous pouvez toujours les retirer. Je ne le ferai pas ici, \u00e7a m&rsquo;arrange pour l&rsquo;effet recherch\u00e9.<\/p>\n<pre class=\"code\"><code class=\"language-css\">img.lomo-double {\r\n\tposition: absolute;\r\n\ttop: 0; left: 0;\r\n\theight: 100%;\r\n\twidth: auto;\r\n\tmix-blend-mode: screen;\r\n\topacity: .3;\r\n}<\/code><\/pre>\n<p>Et voici l&rsquo;effet final !<\/p>\n<p><a href=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-double-exposure.jpg\" rel=\"attachment wp-att-5729\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-5729\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-double-exposure.jpg\" alt=\"La photo finale en double exposition\" width=\"1799\" height=\"1294\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-double-exposure.jpg 1799w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-double-exposure-300x216.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-double-exposure-768x552.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/02\/lomography-css-filter-double-exposure-600x432.jpg 600w\" sizes=\"(max-width: 1799px) 100vw, 1799px\" \/><\/a><\/p>\n<p>Vous pouvez jouer avec ce dernier effet sur CodePen.<\/p>\n<p style=\"text-align: center;\"><a class=\"demo\" href=\"http:\/\/codepen.io\/CreativeJuiz\/pen\/KzKxzB\">Effet double exposition<\/a><\/p>\n<p style=\"text-align: left;\">N&rsquo;h\u00e9sitez pas \u00e0 nos pr\u00e9senter vos photographies, surtout si vous avez jou\u00e9 avec ces filtres CSS sur une cr\u00e9ation originale.<\/p>\n<p style=\"text-align: left;\">\u00c0 la prochaine !<\/p>\n<div class=\"sources\">\n<h2>Sources et liens utiles<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/filter\">MDN CSS Filter<\/a><\/li>\n<li><a href=\"http:\/\/una.im\/lomo#%F0%9F%92%81\">Unaim Lomography<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Apr\u00e8s un petit article sur l&rsquo;effet vintage en CSS, voici une autre id\u00e9e de l&rsquo;exploitation des filtres CSS sur vos images gr\u00e2ce \u00e0 la cr\u00e9ation d&rsquo;un effet lomographie. Cet effet a tendance \u00e0 augmenter les contrastes et la saturation des couleurs de la photo elle-m\u00eame, ou d&rsquo;un d\u00e9grad\u00e9 de couleurs, et peut parfois proposer des [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":5734,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,9],"tags":[644,358,256,43],"coauthors":[597],"class_list":["post-5493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-tutoriels","tag-effets-graphiques","tag-filtre","tag-image","tag-photographie"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/5493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=5493"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/5493\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/5734"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=5493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=5493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=5493"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=5493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}