L'une des fonctionnalités les plus précieuses de Photoshop, sans aucun doute, la fonctionnalité qui l'a propulsé avant ses modes de mélange de compétition. Les modes de fusion prennent deux pixels superposés et les combinent de différentes manières. Par exemple, le mode de fusion des couleurs les plus sombres rendra simplement le plus sombre des deux pixels. Lorsqu'ils sont étendus sur une image entière, les modes de fusion peuvent produire des effets étonnants.
Bien que Photoshop d'Adobe n'ait pas inventé les modes de fusion, sa mise en œuvre est certainement la plus émulée. Mais maintenant, vous n'avez pas besoin de Photoshop pour styliser vos images de cette manière, car nous pouvons tout faire, dynamiquement, avec CSS3.
Tel qu'il est, support du navigateur pour CSS 'la propriété background-blend-mode s'améliore. Les versions antérieures des navigateurs nécessitaient des préfixes de fournisseurs et / ou l'activation de fonctionnalités expérimentales, mais caniuse.com signale la prise en charge dans les versions actuelles de Chrome, Firefox et Opera, suivie bientôt de Safari.
Il n'y a pas encore de support IE, mais comme les modes de fusion sont une amélioration progressive, nous pouvons commencer à les utiliser maintenant.
Il y a un certain nombre d'options de mode de fusion dans les recommandations candidates CSS3, mais la plus utile à nos fins est le mode fondu-mélange . Cette propriété nous permet de fusionner deux images, ou une image et une couleur d'arrière-plan.
Voici le code dont nous avons besoin:
Et voici notre CSS de base:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Nous sommes maintenant prêts à ajouter les modes de fusion.
Pour ce faire, nous allons ajouter une autre classe à notre div, par exemple "multiplier":
Et puis nous créerons une seconde règle de style:
.blend.multiply{background-blend-mode: multiply;}Si vous souhaitez regarder le code, vous pouvez Téléchargez les fichiers sources ici.
Multipliez , comme son nom l'indique, multiplie le pixel de base par la couleur de fondu, ce qui donne une couleur plus sombre. La multiplication du noir donne du noir et la multiplication du blanc laisse l’image inchangée.
background-blend-mode: multiply;La superposition est un mode de fusion complexe. La multiplication dépend de la couleur de base: les couleurs claires deviennent plus claires, les couleurs sombres deviennent plus foncées.
background-blend-mode: overlay;À l'opposé de l' obscurcissement , éclaircir une image en comparant les deux pixels qui se chevauchent et en choisissant le plus clair des deux.
background-blend-mode: lighten;La brûlure de couleur est l'opposé de l' esquive de couleur , elle assombrit la couleur de base et augmente le contraste.
background-blend-mode: color-burn;La lumière douce est similaire à la lumière dure , mais au lieu de multiplier ou de filtrer les couleurs, la lumière douce utilise esquiver et graver pour un effet plus subtil.
background-blend-mode: soft-light;L'exclusion est similaire à la différence , mais elle produit moins de contraste et est donc un peu plus utilisable.
background-blend-mode: exclusion;La saturation , comme la teinte , fusionne deux des valeurs de la couleur de base avec une propriété de la couleur de fusion, en l’occurrence la saturation.
background-blend-mode: saturation;La luminosité est l'inverse de la couleur , elle combine la teinte et la saturation de la couleur de base et la luminance de la couleur de fondu.
background-blend-mode: luminosity;