La propriété CSS background-blend-mode

Avant tout merci photoshop, bien que c’est fini le temps ou certain effets n’était pas possible sans lui.

Aujourd’hui avec CSS 3 voici un effet que nous pouvons réaliser.

Les propriétés CSS

Définition et utilisation

La propriété background-blend-mode définit le mode de fusion et le mélange de chaque calque d'arrière-plan (couleur ou image).

Valeur par défaut :

normal

Héritée :

ne

Animer :

No

Version:

CSS3

Syntaxe JavaScript :

object. style.backgroundBlendMode="screen"

Appui des navigateurs de la propriété background-blend-mode

Les nombres dans le tableau spécifient la version à partir du quelle  le navigateur prend totalement en charge la propriété background-blend-mode.

Propriété  | Navigateur

Google Chrome

Internet Explorer

Firefox

Safari

Opera

background-blend-mode

35

N’est pas supporté

30

7.1

22

Syntaxe CSS de la propriété background-blend-mode.

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

Valeurs de la propriété background-blend-mode

Valeur

Description

normal

C’est  la valeur par défaut. Définit le mode de fusion  normale

multiply

Définit le mode de fusion à multiplier

screen

Définit le mode de fusion à l'écran

overlay

Définit le mode de fusion de superposer

darken

Définit le mode de fusion pour assombrir

lighten

Définit le mode de fusion à alléger

color-dodge

Définit le mode de fusion de couleur Dodge

saturation

Définit le mode de fusion de la saturation

color

Définit le mode de fusion à la couleur

luminosity

Définit le mode de fusion à la luminosité

Exemple

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
<title>Exemple: la propriété background-blend-mode </title>
<style>
div {
  width: 300px;
  height: 300px;
  background-size: 300px 300px;
  background-repeat:no-repeat;
  background-image: linear-gradient(to left, black 0%,white 100%),
url('http://www.oujood.com/images/logo.png');
  background-blend-mode: multiply;
}
p{font-size: 1.5em;  }
</style>
</head>
<body>
<div></div>
<p><b>Note:</b> Internet Explorer ne prend pas en
charge la propriété background-blend-mode.</p>
</body>
</html>

 

Pour voir les différents effets tester l’exemple avec les différentes valeurs  de la propriété background-blend-mode.

Exemple 2 : enchaînement  de plusieurs modes de fusion.

Chaque couche de fond ne peut avoir seulement un mode de mélange unique, cependant, si nous utilisons des dégradés linéaires multiples, par exemple, chacun d'eux peut avoir son propre mode de fusion qui permet un affichage intéressant.

Ce résultat est obtenu en énumérant ces valeurs dans l'ordre de la couche de fond que vous souhaiteriez

En voici un exemple :

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
<title>Exemple: la propriété background-blend-mode avec plusieurs
couches</title>
<style>
div {
  width: 300px;
  height: 300px;
  background-size: 300px 300px;
  background: linear-gradient(purple 0%, red 90%), linear-gradient(to
right, purple 0%, yellow 90%),
url('http://www.oujood.com/images/logo.png'); background-blend-mode:
screen, saturation, lighten;
}
p{
   font-size: 1.5em;
}
</style>
</head>
<body>
<div></div>
<p><b>Note:</b> Internet Explorer ne supporte pas la
propriété background-blend-mode.</p>
</body>
</html>

 

Par Gerywa 11 Janvier 2016