{"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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"Apr\u00e8s un petit article sur l&#039;effet vintage en CSS, voici une autre id\u00e9e de l&#039;exploitation des filtres CSS sur vos images gr\u00e2ce \u00e0 la cr\u00e9ation d&#039;un effet lomographie. Cet effet a tendance \u00e0 augmenter les contrastes et la saturation des couleurs de la photo elle-m\u00eame, ou d&#039;un d\u00e9grad\u00e9 de couleurs, et peut parfois proposer des\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Geoffrey Crofte\"\/>\n\t<meta name=\"keywords\" content=\"effets graphiques,filtre,image,photographie,css \/ css3,tutoriels\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#article\",\"name\":\"Un effet lomographie en CSS\",\"headline\":\"Un effet lomographie en CSS\",\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/lomography.png\",\"width\":200,\"height\":200},\"datePublished\":\"2016-03-02T13:37:14+01:00\",\"dateModified\":\"2016-10-01T23:49:15+02:00\",\"inLanguage\":\"fr-FR\",\"commentCount\":8,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#webpage\"},\"articleSection\":\"CSS \\\/ CSS3, Tutoriels, effets graphiques, filtre, image, photographie, CreativeJuiz\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels#listItem\",\"name\":\"Tutoriels\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels#listItem\",\"position\":2,\"name\":\"Tutoriels\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#listItem\",\"name\":\"Un effet lomographie en CSS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"name\":\"Accueil\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#listItem\",\"position\":3,\"name\":\"Un effet lomographie en CSS\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/tutoriels#listItem\",\"name\":\"Tutoriels\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#webpage\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css\",\"name\":\"Un effet lomographie en CSS\",\"description\":\"Apr\\u00e8s un petit article sur l'effet vintage en CSS, voici une autre id\\u00e9e de l'exploitation des filtres CSS sur vos images gr\\u00e2ce \\u00e0 la cr\\u00e9ation d'un effet lomographie. Cet effet a tendance \\u00e0 augmenter les contrastes et la saturation des couleurs de la photo elle-m\\u00eame, ou d'un d\\u00e9grad\\u00e9 de couleurs, et peut parfois proposer des\",\"inLanguage\":\"fr-FR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/lomography.png\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css\\\/#mainImage\",\"width\":200,\"height\":200},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/tutoriels\\\/effet-lomographie-css#mainImage\"},\"datePublished\":\"2016-03-02T13:37:14+01:00\",\"dateModified\":\"2016-10-01T23:49:15+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/\",\"name\":\"Creative Juiz\",\"description\":\"HTML5, CSS3, JavaScript, WordPress Tutorials\",\"inLanguage\":\"fr-FR\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Un effet lomographie en CSS","description":"Apr\u00e8s un petit article sur l'effet vintage en CSS, voici une autre id\u00e9e de l'exploitation des filtres CSS sur vos images gr\u00e2ce \u00e0 la cr\u00e9ation d'un effet lomographie. Cet effet a tendance \u00e0 augmenter les contrastes et la saturation des couleurs de la photo elle-m\u00eame, ou d'un d\u00e9grad\u00e9 de couleurs, et peut parfois proposer des","canonical_url":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css","robots":"max-image-preview:large","keywords":"effets graphiques,filtre,image,photographie,css \/ css3,tutoriels","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#article","name":"Un effet lomographie en CSS","headline":"Un effet lomographie en CSS","author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/03\/lomography.png","width":200,"height":200},"datePublished":"2016-03-02T13:37:14+01:00","dateModified":"2016-10-01T23:49:15+02:00","inLanguage":"fr-FR","commentCount":8,"mainEntityOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#webpage"},"isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#webpage"},"articleSection":"CSS \/ CSS3, Tutoriels, effets graphiques, filtre, image, photographie, CreativeJuiz"},{"@type":"BreadcrumbList","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","position":1,"name":"Accueil","item":"https:\/\/www.creativejuiz.fr\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels#listItem","name":"Tutoriels"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels#listItem","position":2,"name":"Tutoriels","item":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#listItem","name":"Un effet lomographie en CSS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","name":"Accueil"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#listItem","position":3,"name":"Un effet lomographie en CSS","previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/tutoriels#listItem","name":"Tutoriels"}}]},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/#person","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author","url":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"WebPage","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#webpage","url":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css","name":"Un effet lomographie en CSS","description":"Apr\u00e8s un petit article sur l'effet vintage en CSS, voici une autre id\u00e9e de l'exploitation des filtres CSS sur vos images gr\u00e2ce \u00e0 la cr\u00e9ation d'un effet lomographie. Cet effet a tendance \u00e0 augmenter les contrastes et la saturation des couleurs de la photo elle-m\u00eame, ou d'un d\u00e9grad\u00e9 de couleurs, et peut parfois proposer des","inLanguage":"fr-FR","isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#breadcrumblist"},"author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"creator":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2016\/03\/lomography.png","@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css\/#mainImage","width":200,"height":200},"primaryImageOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/effet-lomographie-css#mainImage"},"datePublished":"2016-03-02T13:37:14+01:00","dateModified":"2016-10-01T23:49:15+02:00"},{"@type":"WebSite","@id":"https:\/\/www.creativejuiz.fr\/blog\/#website","url":"https:\/\/www.creativejuiz.fr\/blog\/","name":"Creative Juiz","description":"HTML5, CSS3, JavaScript, WordPress Tutorials","inLanguage":"fr-FR","publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"}}]}},"aioseo_meta_data":{"post_id":"5493","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[],"defaultGraph":"","defaultPostTypeGraph":""},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2020-12-21 17:16:17","updated":"2025-07-09 23:49:02","seo_analyzer_scan_date":null},"_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}]}}