Effets d'images CSS, 1 : vintage délavé

On peut réaliser de nombreux effets directement dans le navigateur aujourd'hui, sans passer par Photoshop. Una Kravets combine les fonctionnalités CSS disponibles actuellement, filtres, blend modes, dégradés, textures, transformations. Passionnant!

Par

La semaine dernière, j’ai donné une conférence dans le cadre de CSS Conf EU intitulée PS id Dead!: Editing Photos in CSS. Mon idée de départ était de prendre 10 cas d’utilisation courants de Photoshop et de montrer qu’on peut les réaliser aujourd’hui directement dans le navigateur, mais lorsque j’ai commencé à me plonger dans les effets CSS et les Blend Modes, il y avait tellement de choses à explorer ! J’ai montré certains de ces effets dans la conférence et maintenant je vais me lancer dans une série d’articles pour les présenter de manière plus digeste. Alors commençons avec quelque chose de simple et efficace !

L’effet “délavé”

On trouve souvent cet effet de photo vieillie dans les filtres qui visent à créer un feeling “vintage”. Ce qui se passe ici c’est que les ombres les plus sombres sont éclaircies et les détails ombrés sont perdus. L’apparence est celle d’un contraste plus faible du fait que la couleur et la luminosité sont limitées.

Sans effet délavé
Avec effet délavé

Ici, nous remplaçons les ombres par des tons plus clairs. Si l’ombre existante est plus sombre que le “nouveau” ton, elle est remplacée par ce dernier. Le blend mode lighten a l’air tout à fait approprié pour cela.

 NdT : ombres, tons, nuances, couleur, luminosité... besoin d’une petite révision des concepts et de la terminologie des couleurs ? c’est ici !.

Étape #1 : Blend-Mode: Lighten

On applique le blend mode lighten soit sur un pseudo élément, soit sur un élément qui en chevauche un autre. Vous pouvez utiliser background-blend-mode: lighten sur un élément comportant des blend modes multiples, ou mix-blend-mode: lighten sur l’élément qui chevauche l’autre. Cela dit, je vous recommanderais plutôt les backgrounds multiples pour cet effet (voir ci-dessous la partie Application).

NB : on ne peut pas appliquer les pseudo éléments :before et :aftersur l’élément <img> ( NdT : c’est le problème des éléments “remplacés”, pour plus d’info sur ce point important et souvent méconnu, voir l’article Qu’est-ce qu’un élément remplacé?).

Avec le blend mode lighten, la luminosité des pixels est déterminée en comparant, pour chaque canal RGB, les pixels qui se chevauchent : le pixel ayant la luminosité la plus sombre voit sa couleur et son ton remplacés par le plus lumineux. Si par exemple un orange brillant chevauche un marron sombre, les pixels deviennent oranges car chaque canal est plus clair. Si c’est un élément noir qui est au-dessus, le marron l’emporte car chacun de ses canaux est plus clair que le noir. Lorsque nous mélangeons des tons nous obtenons une nouvelle couleur à partir de la tonalité RGB la plus claire, pour chaque canal.

Une ombre violet sombre de rgb(195, 25, 106) éclaircie par du bleu rgb(6, 19, 255) devient magenta rgb(195, 25, 255) car elle prend les valeurs de rouge et de vert du premier et de bleu du deuxième.

Résumons tout ceci visuellement :

Les 3 cas de figure. En haut, sans blend mode, en bas après application du blend mode lighten.

NB : Nous perdons la partie extérieure de l’élément supérieur parce qu’elle prend la luminosité du blanc sous-jacent.

Étape #2 : Déterminer la couleur la plus sombre

Nous pouvons utiliser cette fonctionnalité pour déterminer ensuite la valeur la plus sombre que nous voulons donner à notre image, ce qui nous permet d’éliminer les détails à l’intérieur des éléments sombres et de créer cet effet adouci. Par exemple, si nous choisissons d’avoir pour ombre la plus sombre un gris pâle, tous les pixels plus sombres que ce gris deviendront gris pâles, et tous ceux qui sont plus clairs resteront inchangés.

NB : Vous obtiendrez sans doute l’effet recherché en choisissant un violet ou un marron sombre.

Application

Pour l’instant, la meilleure façon d’appliquer cet effet est d’utiliser les backgrounds multiples, parce que tous les navigateurs ne supportent pas encore les blend modes (voir Can I Use pour une info toujours à jour). Si vous utilisez des backgrounds multiples, l’image du dessus sera affichée dans tous les cas, et le second background avec l’image éclaircie apparaîtra si les blend modes sont supportés, ce sera une amélioration progressive. En voici un exemple live (jouez avec le code à droite !) :


Et un petit @Mixin pour nous faciliter la vie !

Ok, c’est cool, mais on pourrait encore se faciliter la vie, non ? Appliquons un petit mixin !

//SCSS
@mixin fade-it($img, $shadow: #536) {
  background: url("#{$img}"), $shadow;
  background-blend-mode: lighten;
}

.apply-base {
  @include fade-it("1.jpg");
}

.apply-unique-shade {
  @include fade-it("2.jpg",
                   #293e78);
}

Ce code Sass une fois compilé nous donne le CSS suivant :

//CSS
.apply-base {
  background: url("1.jpg"), #536;
  background-blend-mode: lighten;
}

.apply-unique-shade {
  background: url("2.jpg"), #293e78;
  background-blend-mode: lighten;
}

En résumé : l’effet vintage délavé = blend mode lighten + un élément ayant pour background la couleur de l’ombre.

Les articles de cette série :

  1. Effet vintage délavé
  2. Effet lunettes 3D
  3. Trois sortes de vignettes
  4. Textures Bokeh
  5. Filtres lomographiques
  6. Effet photo infrarouge

Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les Blend Modes parus dans la Cascade.


Ressources complémentaires en anglais

Ressources complémentaires en français


original paru le dans Almost Profound.

Sur l’auteur : est développeur front-end, elle conçoit des systèmes de design et des prototypes de logiciels chez IBM Design à Austin, Texas. Elle fait partie des membres principaux de l’organisation Design Open et elle est fondatrice des meetups Sassy DC et ATX Sass. Elle dessine parfois, elle code beaucoup et parle de Sass, de performance web et d’open source. On peut la suivre sur Twitter, Dribbble, Github, Codepen.

Traduit avec l’aimable autorisation de Una Kravets.
Copyright Una Kravets © 2015.