Modalità di fusione

Podcast CSS - 024: Modalità di combinazione

Duotone è un trattamento cromatico molto diffuso nella fotografia che fa sembrare un'immagine composta solo da due colori in contrasto: uno per le alte luci e l'altro per le condizioni di scarsa illuminazione. Tuttavia, come puoi farlo con il CSS?

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

Che cos'è una modalità di fusione?

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

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

Utilizzi background-blend-mode quando hai più sfondi su un elemento e vuoi che tutti si confondano l'uno con l'altro.

mix-blend-mode influisce sull'intero elemento, inclusi i suoi pseudo-elementi. Un caso d'uso è l'esempio iniziale di un'immagine bicolore, con livelli di colore applicati all'elemento tramite i suoi pseudo-elementi.

Le modalità di fusione rientrano in due categorie: separabili e non separabili. Una modalità di fusione separabile considera ogni componente di colore, ad esempio RGB, singolarmente. Una modalità di fusione non separabile prende in considerazione tutti i componenti colore nello stesso modo.

Compatibilità del browser

mix-blend-mode

background-blend-mode

Modalità di fusione separabile

Normale

Questa è la modalità di fusione predefinita e non modifica nulla della fusione di un elemento con altri.

Moltiplica

La modalità di fusione multiply è simile all'impilamento di più trasparenze. I pixel bianchi appariranno trasparenti e i pixel neri appariranno neri. Qualsiasi cosa intermedia moltiplicherà i suoi valori di luminosità (luce). Questo significa che le luci diventano molto più chiare, scure, più scure, il più delle volte.

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

Schermo

L'uso di screen moltiplica i valori della luce, un effetto inverso a multiply e il più delle volte produce un risultato più luminoso.

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

Overlay

Questa modalità di fusione overlay combina multiply e screen. I colori di base scuri diventano più scuri e i colori chiari di base diventano più chiari. I colori della gamma media, ad esempio 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 tra le due. Per farlo, confronta i valori RGB anziché la luminosità (come farebbe multiply e screen), per ciascun canale di colore. Con darken e lighten, questo processo di confronto spesso crea nuovi valori di colore.

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

Schiarisci

L'uso di lighten comporta l'esatto opposto di darken.

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

Schivatura colore

Se usi color-dodge, il colore di sfondo viene schiato in modo da riflettere il colore di origine. I colori nero puro non vedono alcun effetto da questa modalità.

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

Bruciatura colore

La modalità di fusione color-burn è molto simile alla modalità di fusione multiply, ma aumenta il contrasto, generando quindi mezzitoni più saturi e alte luci ridotte.

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

Luce intensa

L'uso di hard-light crea un contrasto vivido. Questa modalità di fusione filtra o moltiplica i valori di luminosità. Se il valore del pixel è più chiaro del grigio 50%, l'immagine viene schiacciata, come se fosse filtrata. Se è più scuro, viene moltiplicato.

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

Luce tenue

La modalità di fusione soft-light è una versione meno efficace di overlay. Funziona quasi allo stesso modo con meno contrasto.

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

Differenza

Un buon modo per comprendere il funzionamento di difference è un po' come funziona un negativo fotografico. La modalità di fusione difference prende il valore della differenza di ogni pixel, invertendo i colori della luce. Se i valori sono identici, il colore diventa nero. Le differenze nei valori verranno invertite.

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

Esclusione

L'uso di exclusion è molto simile a quello di difference, ma invece di restituire il nero per pixel identici, restituisce il 50% di grigio, con un conseguente output più morbido con meno contrasto.

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

Modalità di fusione non separabili

Queste modalità di fusione sono paragonabili ai componenti color HSL. Ognuno di essi prende uno specifico valore del componente 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 se utilizzi saturation per la modalità di fusione la saturazione del colore di origine viene applicata alla tonalità e alla luminosità del colore di sfondo.

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

Colore

La modalità di fusione color creerà 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'opposto 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

Se imposti la proprietà isolation con il valore isolate, verrà creato un nuovo contesto di sovrapposizione, che impedirà la fusione con un livello di sfondo. Come hai imparato nel modulo z-index, quando crei un nuovo contesto di stack, quel livello diventa il livello di base. Ciò significa che le modalità di fusione a livello principale non verranno più applicate, ma gli elementi all'interno di un elemento con un set isolation: isolate possono essere ancora uniti.

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

Verifica le tue conoscenze

Verifica la tua conoscenza delle modalità di fusione