CSS Blend Modes, une introduction

De superbes effets Photoshop que nous admirons sur certains sites statiques peuvent aujourd'hui être réalisés facilement avec CSS3 Blend Modes. Chris Coyier fait le tour du sujet en amateur créatif.

Par

Bennett Feely a fait un super boulot en montrant à tous la gloire de CSS Blend Modes. Beaucoup d'effets que nous sommes habitués à voir dans les sites statiques (grâce à Photoshop) sont absents des sites dynamiques. Mais tout cela va changer à mesure que CSS Blend Modes gagnera en compatibilité. J'ai eu envie de regarder différentes façons de l'utiliser, pour clarifier le sujet.

NdT : Pour faire fonctionner Blend Modes et profiter des exemples qui suivent, consultez le paragraphe Compatibilité navigateurs.

Backgrounds multiples

Vous pouvez mélanger des background-image, ou les mélanger avec une couleur de background. Il suffit pour ça de  :

//CSS
.blended {
  background-image: url(face.jpg);
  background-color: red;
  background-blend-mode: multiply;
}

NdT : Dans la démo CodePen ci-dessous, vous pouvez cliquer comme d'habitude sur HTML, CSS et Result pour voir les détails.
Si vous voulez voir les blend modes qui suivent dans toute leur splendeur, activez sur Chrome les fonctionnalités expérimentales de Webplatform en tapant l'adresse suivante dans la barre de saisie
 :
chrome://flags/#enable-experimental-web-platform-features
et cliquez sur activer.

See the Pen Background Blending by Chris Coyier (@chriscoyier) on CodePen.

Multiply est un mode sympa et utile, mais il y a aussi : screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity, et également normal qui est un reset.

Un élément peut avoir plus d'un background, empilé, comme :

//CSS
.graphic-or-whatever {
  background:
    url(grid.png),
    url(building.jpg)
}

Ceux-ci peuvent se mélanger tout simplement en ajoutant un background-blend-mode.

See the Pen Multiple Background Blending by Chris Coyier (@chriscoyier) on CodePen.

Un exemple cool et pratique, par Bennett Feely :

See the Pen rxoAc by Bennett Feely (@bennettfeely) on CodePen.

Un autre exemple, qui re-combine très intelligemment une image séparée en ses composantes cyan, magenta, yellow et noire (CMYK). Vous savez que c'est comme ça que ça marche dans l'imprimerie, pas vrai ? =)

See the Pen CMY/CMYK Color printing with background-blend-mode by Bennett Feely (@bennettfeely) on CodePen.


Avec des éléments HTML arbitraires

Mélanger des backgrounds, ok c'est pas mal, mais personnellement ça m'excite moins que de mélanger des éléments HTML arbitraires. Par exemple un titre <h1> sur un background. Ou même du texte sur du texte.

J'ai vu ce truc à l'aéroport l'autre jour et je l'ai pris en photo parce que je le trouvais cool et j'essayais de m'imaginer comment je pourrais reproduire le même effet sur le web :


un message avec des lettres colorées se chevauchant

J'ai d'abord essayé avec opacity. Mais opacity affadit les couleurs et ne donne pas aux parties qui se chevauchent cette couleur sombre. CJ Gammon m'a montré la propriété qui convient exactement : mix-blend-mode.

J'ai donc fait :

//HTML
<h1>hungry?</h1>

Puis un peu de Lettering.js :

//jQuery
$("h1").lettering();

Puis resserrer les lettres avec un letter-spacing négatif, ajouter le mix-blend-mode et les couleurs :

//CSS
h1 {
  font-size: 7rem;
  font-weight: 700;
  letter-spacing: -1.25rem;
}
h1 span {
  mix-blend-mode: multiply;
}
h1 span:nth-child(1) {
  color: rgba(#AB1795, 0.75);
}
/* colorer chaque lettre: span:nth-child(2), (3), etc... */

Comparez :

See the Pen Overlapping Letters by Chris Coyier (@chriscoyier) on CodePen.

Comme je l'ai déjà dit, le texte sur image est un bon cas d'utilisation :

See the Pen GxlBm by Chris Coyier (@chriscoyier) on CodePen.


Blend Modes et Canvas

À noter que <canvas> a aussi ses blend modes et la compatibilité est meilleure à ce jour (voir plus bas pour toutes ces questions).

Vous le définissez dans le contexte du canevas :

//JS
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.globalCompositeOperation = 'multiply';

Cette valeur peut être n'importe laquelle de celles que j'ai listées plus haut. Voici une démo simple :

See the Pen canvas blend modes by Chris Coyier (@chriscoyier) on CodePen.

et une autre, super créative, où vous pouvez voir comment les mélanges de couleurs donnent vie à l'animation :

See the Pen sketch.js Demo by Justin Windle (@soulwire) on CodePen.


Blend Modes et SVG

Comme vous vous y attendiez, SVG a ses propres façons de faire. L'une d'elles consiste à l'intégrer au <svg> lui-même, et c'est assez compliqué :

//HTML
<svg>

  <defs>

    <filter id="f1" x="0" y="0" width="1" height="1">
      <feImage xlink:href="#p1" result="p1"/>
      <feImage xlink:href="#p2" result="p2"/>
      <feBlend mode="multiply" in="p1" in2="p2" />
    </filter>

    <path id="p1" d='M100 100 L200 100 L200 200 L100 200 Z' fill='#00FFFF'/>
    <path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill='#CC3300'/>

  </defs>

  <rect width="100%" height="100%" filter="url(#f1)"/>

</svg>

See the Pen Fnvdp by Chris Coyier (@chriscoyier) on CodePen.

...et un exemple plus complexe (faites rerun et regardez pendant une dizaine de secondes) :

See the Pen Opacity=1: iOS 7 Photos Icon Using SVG Blends by Chris Coyier (@chriscoyier) on CodePen.

La bonne nouvelle est que mix-blend-mode fonctionne avec le SVG inline. Donc si vous utilisez SVG de cette façon, vous pouvez cibler les formes elles-mêmes, avec des classes par exemple, et leur donner le blend mode que vous voulez.

L'exemple qui suit, par Bennett, fait exactement ça :

See the Pen KDkCj by Bennett Feely (@bennettfeely) on CodePen.


Compatibilité navigateurs

Pour canvas : Firefox 20+, Chrome 30+, Safari 6.1+, Opera 17+, iOS 7+, Android 4.4+. Mauvaise nouvelle: pas de IE.

Pour HTML/CSS : Firefox 30+, Chrome 35+, Safari 6.1 (apparemment pas 7?). Compatibilité moins bonne que canvas actuellement.

Pour l'instant, pour Chrome, il vous faudra taper chrome://flags/ et autoriser “Activer les fonctionnalités expérimentales de Web Platform”.

(Retour au début de l'article)    ↩︎

Pour être à jour de ces questions de compatibilité, vous pouvez consulter la matrice Adobe.


NdT: Ces basiques de CSS Blend Modes sont une bonne intro à CSS Blend Modes, un petit guide, traduit ici-même.


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

Tous les articles sur Blend Modes parus dans la Cascade.


Ressources complémentaires en anglais


original paru le dans CSS-Tricks.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.

Traduit avec l'aimable autorisation de CSS-Tricks et de l'auteur.
Copyright CSS-Tricks © 2014.