Share
Nous avons créé un guide complet pour vous aider à apprendre le CSS, que vous soyez débutant avec les bases ou que vous souhaitiez explorer un CSS plus avancé..
Vous connaissez peut-être les «modes de fusion» si vous êtes un utilisateur de Photoshop; ils vous permettent de combiner des calques de différentes manières et vous permettent de jouer avec beaucoup de plaisir. Les modes de fusion dans CSS, cependant, ne sont pas supportés universellement, mais ils sont certainement en route.
Dans ce didacticiel, nous allons apprendre le fonctionnement des modes de fusion et les différentes manières de les implémenter à l'aide de CSS..
Si vous n'avez jamais rencontré de modes de fusion, leur mode de fonctionnement peut sembler un peu insaisissable. Faisons le décomposer.
Les logiciels de conception proposent des modes de mélange depuis des années, mais le concept de mode de mélange est en réalité utilisé depuis bien plus longtemps, avant même que les ordinateurs ne soient inventés..
La partie "mélange" de modes de fusion fait référence à la prise de deux couleurs et à leur combinaison d’une manière ou d’une autre. Plus précisément, nous prenons deux cartes de pixels et les fusionnons.
Comment que le mélange ait lieu est la partie «mode» de modes de fusion. Comment ces couleurs interagissent-elles? Puisque nous travaillons avec l’espace numérique, nous pouvons utiliser n’importe quelle formule mathématique et l’appliquer aux deux entrées pour obtenir une sortie..
Une image non traitée d'une méduse
La même méduse avec une couche orange solide (notre "source") placée dessus
Voici notre couche source avec le mode de fusion «écran» appliquéSi vous vous sentez vraiment ambitieux, consultez le document de composition officiel du W3C FX Task Force qui explique les implémentations mathématiques de chacun des différents modes de fusion. Il démontre une formule utilisée pour calculer le mélange plus.
Cm = B (Cb, Cs)
Accentsconagua
Cm est la couleur résultante après le mélange. B fait référence à la fonction de mélange. Cb variable est la couleur de fond. Cs variable est la couleur source. Toutes les couleurs sont basées sur une échelle 0-1, qui mappe directement sur une valeur RVB 0-255.
Il existe deux catégories de modes de fusion. Les premiers sont considérés comme «non séparables» et les seconds (sans surprise) comme «séparables». L'algorithme sous-jacent détermine si un mode de fusion est considéré comme séparable ou non. Si l'algorithme traite chacun des canaux de couleur distincts (rouge, vert et bleu), il est considéré comme non séparable. S'il utilise chacun des canaux de couleur individuellement, il est considéré comme séparable..
Tous les modes de fusion ne peuvent renvoyer que des couleurs comprises entre 0 et 255. Tout élément situé au-delà de cette plage dans l'une ou l'autre direction sera coupé à cette plage. Lorsque vous voyez de grandes zones de blanc ou de noir sur une zone fusionnée, il est probable que ces zones sont coupées..
Les modes de fusion CSS, lorsqu'ils sont pris en charge, fonctionnent de deux manières différentes. Le premier type de mode de fusion est appelé mode de fusion de fond. Cette propriété vous permet de mélanger tous les arrière-plans d'un même élément..
Si vous avez défini, par exemple, plusieurs images d’arrière-plan (pris en charge par tous les navigateurs au-delà de IE8), la première image d’arrière-plan sera traitée comme un calque source et toute image ajoutée par la suite sera traitée comme un calque d’arrière-plan, située en dessous..
L'ajout d'une couleur d'arrière-plan (qui doit figurer en dernier dans la liste) place un autre calque en bas. La couleur sera traitée comme le calque d'arrière-plan et les images comme les calques source. Prenez la règle de style suivante, par exemple:
div background: url (img / pattern.png), url (img / jellyfish.jpg), # f07e32;
Cela nous donne:
Et nous pouvons ensuite ajouter des modes de fusion dans le mélange:
div background: url (img / pattern.png), url (img / jellyfish.jpg), # f07e32; background-blend-mode: écran;
Voici deux divs utilisant ces styles, l’un sans le mode de fusion, le second avec:
Un type de mode de fusion secondaire, mode mix-blend, permet de mélanger des éléments indépendants. La spécification est plus spécifique à propos de l'implémentation, mais le mélange se produit dans des «contextes d'empilement».
C'est ce qui arrive quand on utilise mode mix-blend, essayer de mélanger (très peu) l’image d’arrière-plan et la couleur dans le même élément:
.my-overlay-element background-color: # f07e32; background-image: url (img / jellyfish.jpg); // Remarque: cette image ne sera pas mélangée avec la couleur d'arrière-plan. mode mélange-mélange: couleur-dodge;
Ci-dessous, vous trouverez une démo interactive pour explorer les effets d'un mode de fusion donné..
Examinons les modes de fusion disponibles en examinant la formule utilisée et en les appliquant chacun au cercle rouge placé au-dessus de nos méduses..
Aucun mode de mélange appliquéB (Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
Screen est nommé d'après le concept de projection simultanée de plusieurs expositions de photos sur un seul écran. La couleur obtenue est toujours au moins aussi claire que les couches mélangées.
Mode de mélange d'écranB (Cb, Cs) = min (Cb, Cs)
Sélectionne le plus sombre des deux couleurs.
Assombrir le mode de mélangeB (Cb, Cs) = max (Cb, Cs)
Sélectionne le plus clair des deux couleurs.
Alléger le mode de fusionsi (Cb == 0) B (Cb, Cs) = 0 sinon si (Cs == 1) B (Cb, Cs) = 1 sinon B (Cb, Cs) = min (1, Cb / (1 - Cs) )
Color Dodge éclaircit la couleur de fond pour refléter la couleur source.
Mode mélange d'esquive de couleursi (Cb == 1) B (Cb, Cs) = 1 sinon si (Cs == 0) B (Cb, Cs) = 0 sinon B (Cb, Cs) = 1 - min (1, (1 - Cb) / Cs)
La brûlure de couleur assombrit la couleur de fond, augmentant le contraste entre la source et l'arrière-plan.
Mode de mélange des couleurssi (Cs <= 0.5) B(Cb, Cs) = Multiply(Cb, 2 x Cs) else B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
Applique «multiplie» sur les couleurs claires et «écran» sur les couleurs plus foncées. Essentiellement, la «lumière dure» est le contraire de la «superposition», que nous examinerons ensuite..
Mode de mélange de lumière dureB (Cb, Cs) = HardLight (Cs, Cb)
Applique «écran» sur les couleurs claires et «multiplie» sur les couleurs plus foncées; écrit de la même manière que «lumière dure», sauf que les arguments de la fonction sont inversés.
Mode de mélange superposési (Cs <= 0.5) B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb) else B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb) with if(Cb <= 0.25) D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb else D(Cb) = sqrt(Cb)
Ce mode de fusion applique une variante de «multiplier» sur les valeurs sombres et une variante de «écran» sur des valeurs plus claires (similaire à l'écran)..
Dans cet algorithme, nous voyons une fonction secondaire ré qui se situe dans le avec clause basée sur la valeur bleue présente dans la couleur. Le résultat final est généralement un effet beaucoup plus doux que celui de "superposition".
Mode de mélange Sof LightB (Cb, Cs) = | Cb - Cs |
La différence prend la valeur de différence absolue entre les deux couleurs, ce qui a l'effet d'un négatif photo..
Mode de fusion DifférenceB (Cb, Cs) = Cb + Cs - 2 x Cb x Cs
Le mode d'exclusion a le même effet de base que le mode «différence», à ceci près que des couleurs similaires produisent une valeur moyenne de contraste inférieure (plutôt qu'une valeur plus sombre)..
Mode de mélange d'exclusionLes modes de fusion «non séparables» utilisent quelques fonctions supplémentaires, dont une ClipColor une fonction, SetLum fonction, et Sam une fonction.
Note importante: Aucune version de Safari ne prend en charge les modes de fusion «Teinte», «Saturation», «Couleur» ou «Luminosité» avec mode mix-blend ou mode de fusion de fond.
ClipColor (C) l = Lum (C) n = min (Cred, Cgreen, Cblue) x = max (Cred, Cgreen, Cblue) si n < 0.0 Cred = l + (((Cred - l) * l) / (l - n)) Cgreen = l + (((Cgreen - l) * l) / (l - n)) Cblue = l + (((Cblue - l) * l) / (l - n)) if x > 1,0 Cred = l + (((Cred - l) * (1 - l)) / (x - l)) Cgreen = l + (((Cgreen - l) * (1 - l)) / (x - l) ) Cblue = l + (((Cblue - l) * (1 - l)) / (x - l)) renvoie C SetLum (C, l) d = l - Lum (C) Cred = Cred + d Cgreen = Cgreen + d Cblue = Cblue + d retour ClipColor (C) Sat (C) = max (Cred, Cgreen, Cblue) - min (Cred, Cgreen, Cblue)
Noter la min, milieu, et max Les fonctions utilitaires se réfèrent aux valeurs minimale, moyenne et maximale. (Mid est ne pas la moyenne des trois valeurs.) Les valeurs Cred, Cgreen, et Cblue fait référence aux valeurs rouge, verte et bleue présentes dans la couleur C.
Avec ces définitions, nous pouvons maintenant examiner les modes de fusion non séparables.
B (Cb, Cs) = SetLum (SetSat (Cs, Sat (Cb)), Lum (Cb))
Ce mode applique la teinte du calque source à la luminance et à la saturation de la couleur de fond.
Mode de mélange de teinteB (Cb, Cs) = SetLum (SetSat (Cb, Sat (Cs)), Lum (Cb))
Ce mode fait la même chose que le mode «teinte», mais applique plutôt la saturation du premier plan à la teinte et la luminance de l'arrière-plan..
Mode de mélange de saturationB (Cb, Cs) = SetLum (Cs, Lum (Cb))
Applique la teinte et la saturation du premier plan à la luminance de l'arrière-plan.
Mode de fusion des couleursB (Cb, Cs) = SetLum (Cb, Lum (Cs))
Ce mode applique la luminosité du calque source à la teinte et à la saturation du calque de fond.
Mode de mélange de luminositéLes modes de fusion dans CSS offrent une nouvelle et excitante flexibilité pour la conception et des expériences esthétiques uniques. Comprendre les mathématiques et la théorie des couleurs qui s'appliquent à chacun des modes de fusion disponibles vous fournit un ensemble d'outils plus holistique..
Que ferez-vous lorsque les navigateurs continueront d’ajouter un support pour les modes de fusion??
