Effets d'images CSS, 2 : lunettes 3D

Dans cet article, nous allons voir comment recréer l'effet d'une photo 3D en utilisant les blend modes et les transformations de CSS. Par Una Kravets, au top de sa créativité.

Par

Cet article fait partie d’une série qui décortique des effets visuels utilisant les filtres CSS et les blend modes. La première partie sur les images “vintage” vous donnera une bonne approche de blend mode lighten. Dans cet article, nos allons voir comment recréer l’effet d’une photo 3D de films comme Mission 3D Spy kids 3 (je ne sais pas pourquoi c’es le premier nom qui me vient à l’esprit, mais faisons avec...)

Images 3D : a.k.a Anaglyphes

Un anaglyphe est une sorte d’image stéréo en 3D créée à partir de deux photographies prises de deux endroits distants d’environ 6 centimètres, soit la distance approximative séparant nos deux yeux. Cela crée une illusion de profondeur lorsqu’on associe ces photos à des lentilles de couleur (c’est aussi la raison pour laquelle certaines personnes voient les images de films en 3D mieux que d’autres, en raison de leur écart pupillaire).

Cet exemple montre un anaglyphe rouge/vert, même si les anaglyphes rouge/cyan sont plus courants pour les films de nos jours.

Le côté sombre

Revenons à nos blend modes. Dans l’article précédent, nous avons utilisé le blend mode lighten. Ici, nous allons voir son double maléfique, le blend mode darken.

OK, mais pourquoi l’appeler double maléfique ? Surtout pour l’allusion, mais voyons ce qui se passe ici (remarque : le blend mode est seulement appliqué au bloc de couleur du dessus) :

J’ai ajouté un arrière-plan gris cette fois-ci, pour mieux visualiser l’item éclairci.

La question intéressante est : que se passe-t-il lorsqu’on applique un blend mode lighten au-dessus d’un blend mode darken ? Ils sont en intersection et s’annulent ! C’est vrai également de multiply / screen et de color-burn / color-dodge parce que les formules mathématiques utilisées sont inverses l’une de l’autre.

Dans cette visualisation, les nombres correspondent à l’ordre des couches superposées. On peut voir qu’à l’intersection du cercle bleu en mode lighten et du cercle bleu en mode darken l’effet est annulé et on revient au bleu original, comme si aucun blend mode n’était appliqué.

Images 3D

Nous utilisons les intersections et nous les combinons avec ce que nous avons appris sur la façon de déterminer les couleurs d’ombres pour créer un effet 3D !

image du film Avatar en 3D

Si vous regardez ces images, vous voyez une couche rouge et une couche cyan, séparées de chaque côté de l’image originale par une certaine distance pour simuler l’écart de 6 centimètres entre nos yeux (nous utiliserons $dist pour cette valeur dans l’exemple de @mixin plus bas). Donc, les étapes de cet effet consisteront à utiliser le cyan et le rouge comme backgrounds multiples et à les mélanger avec background-blend-mode: lighten pour convertir les tons sombres dans les couleurs respectives. Ensuite, nous positionnerons ces éléments à une certaine distance l’un de l’autre et nous ajouterons une perspective.

Les systèmes Cyan, Magenta, Yellow, Black  vs  Red, Green, Blue

Bon, il n’est pas aussi simple que cela de sélectionner les couleurs, mais nous avons de la chance. Rappelez-vous que nous travaillons en RGB. Si nous utilisions un cyan et un jaune au lieu de cyan et rouge, la superposition donnerait du vert au lieu du blanc dont nous avons besoin pour montrer la valeur originale de chaque pixel. Les valeurs qui se mélangeront le mieux dans cette situation sont les valeurs RGB pures comme le rouge rgb(255, 0, 0), le vert rgb(0, 255, 0) et le bleu rgb(0, 0, 255), mais le cyan rgb(0, 255, 255) fonctionne également.

NB : Certains utilisent le vert et le rouge au lieu du bleu et du rouge.

Mélanger les blend modes

Utilisons le cyan et le rouge, puisque c’est ce que les images 3D classiques appliquent. Pour l’instant, voici à quoi ça ressemble (j’ai ajouté un contour pour plus de clarté) :

See the Pen 3D Effect Part 1 by Una Kravets (@una) on CodePen.

C’est ici que la magie des mathématiques de blend mode entrent en scène ! Maintenant, nous appliquons simplement un blend mode darken à la couche supérieure (le rouge) de façon à ce qu’il annule la couche inférieure (le cyan) là où il recouvre la même valeur de pixel ! Cela signifie que l’écartement montrera les couleurs respectives (cyan et rouge) de chaque côté puisque les pixels ne s’alignent pas exactement. Voici une petite animation visuelle pour mieux comprendre (faites rerun si l’animation est stoppée) :

See the Pen 3D Effect Part 2 by Una Kravets (@una) on CodePen.

Perspective

L’étape suivante consiste à ajouter de la perspective. Nous pouvons utiliser les propriétés perspective et transform: rotateY pour créer l’illusion. Pour la partie en cyan, on aura perspective: 400px; transform: rotateY(5deg); (400px représentant la largeur de l’image) et pour la partie en rouge, j’ai divisé l’angle de rotation par deux puisqu’elle hérite de son parent, ce qui nous donne : perspective: -400px; transform: rotateY(-2.5deg);. Je vais également désaturer avec filter: saturate(.8) et me débarrasser du contour :

See the Pen 3D Effect Part 3 by Una Kravets (@una) on CodePen.

Si votre connexion internet ne fonctionne pas ou si les blend modes ne marchent pas, voici à quoi cela ressemble :

Avant et après

Exemple live !


C’est l’heure du @mixin

Tout d’abord notre Sass :

//SCSS
@mixin three-dee($img, $dist: 5px, $deg: 5deg, $width: 100%, $height: 500px) {
    z-index: 1;
    width: $width;
    height: $height;
    position: relative;
    transform: rotateY($deg);
    perspective: $width;
    background: url("#{$img}"), cyan;
    background-blend-mode: lighten;
    background-size: cover;

  &:after {
    content: "";
    position: absolute;
    display: block;
    width: $width;
    height: $height;
    z-index: 2;
    perspective: -$width;
    margin-left: $dist;
    transform: rotateY(-$deg/2);
    background: url("#{$img}"), red;
    background-blend-mode: lighten;
    background-size: cover;
    mix-blend-mode: darken;
  }
}

.cats-in-action {
  @include three-dee("img/cat.jpg", 5px, 10deg, 800px, 600px);
}

...et sa compilation en CSS :

//CSS
.cats-in-action {
  z-index: 1;
  width: 800px;
  height: 600px;
  position: relative;
  transform: rotateY(10deg);
  perspective: 800px;
  background: url("img/cat.jpg"), cyan;
  background-blend-mode: lighten;
  background-size: cover;
}
.cats-in-action:after {
  content: "";
  position: absolute;
  display: block;
  width: 800px;
  height: 600px;
  z-index: 2;
  perspective: -800px;
  margin-left: 5px;
  transform: rotateY(-5deg);
  background: url("img/cat.jpg"), red;
  background-blend-mode: lighten;
  background-size: cover;
  mix-blend-mode: darken;
}
Effet 3D sur la photo du lac Tahoe

Cette image utilise le mixin sans désaturation :

@include three-dee( 'http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg', 5px, 7deg, 500px, 500px);

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.