Modalità di fusione

Il duotone è un trattamento di colore molto utilizzato per la fotografia che fa sembrare un'immagine composta solo da due colori a contrasto: uno per le alte luci e l'altro per le ombre. Come si fa con CSS?

Utilizzando le modalità di miscela e altre tecniche che hai imparato, come i filtri e i pseudo-elementi, puoi applicare questo effetto a qualsiasi immagine.

Che cos'è una modalità di fusione?

Le modalità di miscela vengono comunemente utilizzate in strumenti di progettazione come Photoshop per creare un effetto compositivo mescolando i colori di due o più livelli. Modificando il modo in cui i colori si combinano, puoi ottenere effetti visivi davvero interessanti. Puoi anche utilizzare le modalità di miscela come utilità, ad esempio per isolare un'immagine con uno sfondo bianco in modo che abbia uno sfondo trasparente.

Puoi utilizzare la maggior parte delle modalità di miscela disponibili in uno strumento di progettazione con CSS, utilizzando le proprietà mix-blend-mode o background-blend-mode. mix-blend-mode applica la miscela a un intero elemento e background-blend-mode applica la miscela allo sfondo di un elemento.

Utilizza background-blend-mode quando hai più sfondi in un elemento e vuoi che si fondano tra loro.

mix-blend-mode influisce sull'intero elemento, inclusi i relativi pseudo-elementi. Un caso d'uso è nell'esempio iniziale di un'immagine duotone, che ha livelli di colore applicati all'elemento tramite i relativi pseudo-elementi.

Le modalità di miscela rientrano in due categorie: separabili e non separabili. Una modalità di miscela separabile prende in considerazione ogni componente di colore, come RGB, singolarmente. Una modalità di miscelazione non separabile considera tutti i componenti di colore allo stesso modo.

Compatibilità del browser

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

Modalità di fusione separabili

Normale

Si tratta della modalità di fusione predefinita e non cambia il modo in cui un elemento si fonde con gli altri.

Moltiplica

La modalità di miscela multiply è simile all'accatastamento di più trasparenze una sopra l'altra. I pixel bianchi saranno trasparenti e quelli neri neri. Qualsiasi valore intermedio moltiplica i valori di luminosità (luce). Ciò significa che le tonalità chiare diventano molto più chiare e quelle scure più scure, producendo il più delle volte un risultato più scuro.

.my-element {
  mix-blend-mode: multiply;
}

Schermo

L'utilizzo di screen moltiplica i valori di luce, un effetto inverso rispetto a multiply, e produrrà più spesso un risultato più luminoso.

.my-element {
  mix-blend-mode: screen;
}

Overlay

Questa modalità di miscela, overlay, combina multiply e screen. I colori di base scuri diventano più scuri e i colori di base chiari diventano più chiari. I colori di media tonalità, come il grigio al 50%, non sono interessati.

.my-element {
  mix-blend-mode: overlay;
}

Scurisci

La modalità di fusione darken confronta la luminosità del colore scuro dell'immagine di origine e dell'immagine di sfondo e seleziona la più scura delle due. Lo fa confrontando i valori RGB anziché la luminosità (come farebbero multiply e screen), per ogni canale di colore. Con darken e lighten, spesso vengono creati nuovi valori di colore da questa procedura di confronto.

.my-element {
  mix-blend-mode: darken;
}

Schiarimento

L'utilizzo di lighten fa l'esatto contrario di darken.

.my-element {
  mix-blend-mode: lighten;
}

Schermatura colore

Se utilizzi color-dodge, il colore di sfondo viene schiarito in modo da riflettere il colore di origine. I colori neri puri non sono interessati da questa modalità.

.my-element {
  mix-blend-mode: color-dodge;
}

Bruciatura colore

La modalità di miscela color-burn è molto simile alla modalità di miscela multiply, ma aumenta il contrasto, con un risultato di mezzitoni più saturi e luci ridotte.

.my-element {
  mix-blend-mode: color-burn;
}

Luce intensa

L'utilizzo di hard-light crea un contrasto vivido. Questa modalità di miscelazione attenua o moltiplica i valori di luminosità. Se il valore del pixel è più chiaro del grigio al 50%, l'immagine viene schiarita, come se fosse schermata. Se è più scuro, viene moltiplicato.

.my-element {
  mix-blend-mode: hard-light;
}

Luce tenue

La modalità di miscela soft-light è una versione meno marcata di overlay. Funziona in modo molto simile, ma con meno contrasto.

.my-element {
  mix-blend-mode: soft-light;
}

Differenza

Un buon modo per capire come funziona difference è pensare a come funziona una foto negativa. La modalità di miscela difference prende il valore della differenza di ogni pixel, inversione dei colori chiari. Se i valori di colore sono identici, diventano neri. Le differenze nei valori si invertono.

.my-element {
  mix-blend-mode: difference;
}

Esclusione

L'utilizzo di exclusion è molto simile a difference, ma anziché restituire il nero per i pixel identici, restituirà il grigio al 50%, con un output più morbido e meno contrasto.

.my-element {
  mix-blend-mode: exclusion;
}

Modalità di fusione non separabili

Puoi considerare queste modalità di miscelazione come componenti di colore HSL. Ognuno prende un valore del componente specifico dal livello attivo e lo mescola con altri valori del componente.

Tonalità

La modalità di fusione hue prende la tonalità del colore di origine e la applica alla saturazione e alla luminosità del colore di sfondo.

.my-element {
  mix-blend-mode: hue;
}

Saturazione

Funziona come hue, ma l'utilizzo di saturation come modalità di fusione applica la saturazione del colore di origine alla tonalità e alla luminosità del colore di sfondo.

.my-element {
  mix-blend-mode: saturation;
}

Colore

La modalità di fusione color crea un colore dalla tonalità e dalla saturazione del colore di origine e dalla luminosità del colore di sfondo.

.my-element {
  mix-blend-mode: color;
}

Luminosità

Infine, luminosity è l'inverso di color. Crea un colore con la luminosità del colore di origine e la tonalità e la saturazione del colore di sfondo.

.my-element {
  mix-blend-mode: luminosity;
}

La proprietà isolation

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

Se imposti la proprietà isolation su un valore isolate, verrà creato un nuovo contesto di impilamento che impedirà l'unione con un livello di sfondo. Come hai appreso nel modulo sull'indice z, quando crei un nuovo contesto di impilamento, quel livello diventa il livello di base. Ciò significa che le modalità di fusione a livello di elemento principale non verranno più applicate, ma gli elementi all'interno di un elemento con isolation: isolate impostato possono ancora essere fusi.

Tieni presente che questo non funziona con background-blend-mode perché la proprietà sfondo è già isolata.

Verificare di aver compreso

Verifica le tue conoscenze sulle modalità di miscela

Quali delle seguenti sono modalità di miscelazione CSS?

Schiarimento
Moltiplica
Aumenta l'intensità
Differenza
Overlay
Dullen

Se vuoi fondere colori diversi in modi diversi, di quale stile di modalità di miscelazione hai bisogno?

Non separabili
Separabile