Un effet lomographie en CSS

Après un petit article sur l’effet vintage en CSS, voici une autre idée de l’exploitation des filtres CSS sur vos images grâce à la création d’un effet lomographie. Cet effet a tendance à augmenter les contrastes et la saturation des couleurs de la photo elle-même, ou d’un dégradé de couleurs, et peut parfois proposer des fusions d’images (par double exposition).

Les effets de base

L’effet lomographie plait, ou ne plait pas. Je sais que c’est un style qui ne parle pas à tout le monde, mais le but ici est de vous proposer de travailler une image sur la base d’un objectif précis, qui sera ici la reproduction de cet effet.

Analyse d’une photo

Pour le reproduire, essayons d’analyser ces deux photographies et de repérer les différences.

Ce qui saute aux yeux globalement :

• Les couleurs sont plus vives,
• Les contrastes sont plus forts,
• On dirait que la photo est floue (légèrement)

Ce qui est peut-être moins visible :

• Les couleurs semblent modifiées globalement
• Les couleurs semblent dégradées par endroit
• Il y a du vignettage

En partant de cette analyse, essayons de traduire cela en code.

Parlons peu, parlons code

Afin de manipuler la photo, je vais l’insérer dans un élément neutre div, mais il est possible d’utiliser figure ou span, ou même un lien suivant la situation dans laquelle vous vous trouvez.

<div class="lomo">
	<img src="mon/image.jpg" width="800" height="600" alt="">
</div>

Place aux styles qui sautent aux yeux. Pour la photo de l’exemple, j’ai eu besoin des filtres suivants.

.lomo img {
	filter: saturate(1.5) contrast(1.3) blur(0.2px);
}

Comme vous le voyez, on peut ajouter autant de filtre que désiré, il suffit d’utiliser les unes à la suite des autres les fonctions utiles séparées par un espace.
Si vous n’êtes pas fan du flou, retirez simplement la fonction blur(). Cela nous donne une photo aux contrastes et couleurs réhaussés en quelques lignes de CSS.

Personnellement, je trouve ce résultat un peu sombre, je rajoute donc un peu d’éclat grâce à la fonction brightness(1.1).

.lomo img {
	filter: saturate(1.5) contrast(1.3) blur(0.2px) brightness(1.1);
}

J’ai également utilisé la fonction hue-rotate(-5deg) qui me permet, dans le cas de cette image, de glisser l’ensemble des couleurs vers un tout petit peu plus de rouge. (je l’ai fait en testant des valeurs, par empirisme) Je vous laisse compléter le code en conséquence 😉

Enfin, le plus fun, appliquer des tâches de couleurs, comme une re-colorisation ou dé-colorisation de certaines zones, ou encore une double exposition avec une autre photo… Testons ça.

La double exposition

Nous allons positionner la div conteneur afin de générer un contenu grâce à un pseudo-élément. Voici la marche à suivre.

.lomo {
	position: relative;
}

Puis nous créons le pseudo-élément qui va couvrir toute l’image.

.lomo::after, .lomo::before {
	content: "";
	position: absolute;
	top: 0; right: 0;
	bottom: 0; left: 0;
}

En transparence (pour le moment) nous avons donc deux pseudo-éléments par-dessus notre image. Si vous voulez vous en assurer, ajoutez un background: red; vous verrez.
Nous allons ajouter deux dégradés radiaux en un grâce aux backgrounds multiples et à la fonction radial-gradient().

.lomo::after {
	background:
		radial-gradient(500px circle at 30% 10%, rgba(255,255,0,1), rgba(255,255,255,0)),
		radial-gradient(300px circle at 80% 60%, rgba(200,255,147,1), rgba(255,255,255,0));
}

Le premier dégradé est un jaune d’une étendue de 500px sur une forme de cercle placé à 30% de la gauche de l’image et 10% du haut. Je vous laisse interpréter le second dégradé qui est un jaune-vert.

Si on en reste là, c’est joli, mais on recherche quelque chose de plus incrusté. Vous vous souvenez des propriétés de fusion utilisées sur l’article Un effet délavé sur vos photos ? Nous allons ré-utiliser cette propriété.

.lomo::after {
	mix-blend-mode: overlay;
	opacity: .8;
}

J’ai tout de suite baissé l’opacité car je trouvais l’effet trop agressif.

Il ne reste plus qu’à utiliser notre second pseudo-élément pour créer le vignettage.

.lomo::before {
	z-index: 1;
	background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%,  rgba(0,0,0,0) 50%, rgba(0,0,0,.5));
}

Le z-index ici permet de passer ce pseudo-élément au-dessus du reste afin de bien tout vignetter. Notre dégradé radial prend sa source en plein centre de l’image, commence par une couleur noire complètement transparente jusqu’à 50% de son étendue, puis fini à 50% d’opacité sur les bords de l’image.

Notre effet lomographie est terminé pour cet exemple.
Retrouvez le code sur CodePen pour le modifier en live si vous le souhaitez :

Effet lomographie

Double exposition photo

Tentons d’ajouter à tout cela un mélange avec une autre photo, une double exposition. J’ai chopé ce fond d’écran sur un site qui en fournit à la pelle. Le rouge est intéressant ici car nous n’en avons pas sur notre photo.

Dans mon code HTML, j’ajoute cette photo juste après l’image principale, comme ceci :

<div class="lomo">
	<img src="mon/image.jpg" width="800" height="600" alt="">
<img src="ma/fusion.jpg" width="800" height="600" alt="" class="lomo-double">
</div>

J’ai simplement ajouté une classe sur cette photo pour la distinguer de l’autre. Ainsi je vais pouvoir la placer au-dessus et lui appliquer un mode de fusion pour la « mélanger » à notre photo principale.

Note : les filtres précédemment appliqués sur notre photo principale sont également appliqué sur notre photo à fusionner. Ce n’est pas grave, et vous pouvez toujours les retirer. Je ne le ferai pas ici, ça m’arrange pour l’effet recherché.

img.lomo-double {
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	width: auto;
	mix-blend-mode: screen;
	opacity: .3;
}

Et voici l’effet final !

Vous pouvez jouer avec ce dernier effet sur CodePen.

Effet double exposition

N’hésitez pas à nos présenter vos photographies, surtout si vous avez joué avec ces filtres CSS sur une création originale.

À la prochaine !