Come utilizzare i metodi di fusione CSS

Le modalità di fusione CSS sono un modo semplice per aggiungere effetti immagine direttamente nel browser. Per questo motivo, il modo tradizionale di modificare e quindi salvare le foto da una soluzione software di modifica delle immagini non è sempre necessario. In qualità di designer, abbiamo trascorso innumerevoli ore ad aggiungere effetti alle immagini con strumenti come Adobe Photoshop. Mentre segui questo tutorial, noterai che molte opzioni assomigliano a quelle di Photoshop, ma ora possono essere eseguite con l'efficienza dello stile CSS.

Le modalità di fusione del browser elimineranno completamente la necessità di un software di modifica delle immagini? Non del tutto, e certamente non ancora. Ma il supporto CSS e browser ha fatto molta strada nel supportare nuovi modi di modificare le immagini. Ritaglio e mascheratura CSS e SVG, metodi di fusione, Trasformazione 3D e altro possono sicuramente ridurre la dipendenza che abbiamo per il software di modifica delle immagini. Man mano che i browser diventano più sofisticati, vedremo molto più potenziale e (si spera) trascorreremo meno tempo in Photoshop.

Modalità di fusione CSS e modalità di fusione della miscela CSS

Questo tutorial tratterà le modalità di fusione CSS e il modo in cui vengono utilizzate. Per iniziare, ci sono un paio di opzioni diverse di cui dovresti essere a conoscenza. Uno è un effetto con background-blend-mode e l'altro è con mix-blend-mode .

Usando la background-blend-mode property , puoi fondere i livelli di sfondo (immagine o colore) di un elemento. I metodi di fusione sono definiti come un valore e specificano come fondere o mescolare i colori dell'immagine di sfondo con il colore, o altre immagini di sfondo, dietro di essa.

Cosa succede se vuoi fare un po' di fusione ma non con elementi di sfondo? Gli elementi possono essere fusi insieme utilizzando la proprietà mix-blend-mode . Questa proprietà descrive come dovrebbe essere la fusione tra gli elementi HTML impilati. Gli elementi sui livelli sovrapposti si fonderanno con quelli sottostanti. Qualsiasi immagine, testo, bordo o titolo sarà influenzato da questa proprietà.

Esempio di moltiplicazione di Adobe Photoshop

Dare un'occhiata al modo tradizionale di mostrare i metodi di fusione in un editor di immagini ci dà un'idea di cosa possiamo ottenere con i metodi di fusione CSS. La foto seguente è stata creata in Adobe Photoshop. L'immagine si trova sul proprio livello di sfondo con un livello rosso sopra. È stata selezionata una modalità di fusione per il livello rosso, ovvero "Moltiplica". Come puoi vedere, c'è una sovrapposizione rossa. Per ottenere questo effetto, Adobe Photoshop prende i colori dal livello a cui è stato applicato "Moltiplica", li moltiplica per i colori sui livelli sottostanti, quindi li divide per 255 per mostrare il risultato.

Questo stesso effetto può essere ottenuto con CSS consentendo una personalizzazione più rapida e un facile aggiornamento.

Esempio di base di una modalità di fusione CSS

Un semplice esempio per vedere come funzionano i metodi di fusione è la fusione dell'immagine con a con un background-color . Innanzitutto, è necessario dichiarare il percorso dell'URL dell'immagine, quindi specificare un colore. Dopo che questi sono stati decisi, è necessario scegliere la modalità di fusione. Moltiplica è stato selezionato qui per mostrare come questo metodo di fusione influisce sull'aspetto background-image .

.simple-blended {
 background-image: url(image.jpg);
 background-color: red;
 background-blend-mode: multiply;
 }

Un metodo di fusione è il modo in cui viene calcolato il valore del colore finale di un pixel quando i livelli si sovrappongono. Ciascun metodo di fusione prende il valore del colore del primo piano e dello sfondo (colore superiore e colore inferiore), ne calcola il valore e restituisce un valore di colore. Il livello finale visibile è il risultato del calcolo della modalità di fusione su ogni pixel sovrapposto tra i livelli uniti.

Moltiplica è una modalità di fusione molto popolare, ma sono disponibili anche altre opzioni della modalità di fusione: schermo, sovrapposizione, scurisci, schiarisci, schivare colore, brucia colore, luce intensa, luce soffusa, differenza, esclusione, tonalità, saturazione, colore e luminosità. Se viene specificato "normale", questo ripristinerà le cose. Invece di esaminare i dettagli di ogni modalità di fusione uno per uno, sperimentarli è il modo migliore per determinare quale sarà il risultato finale.

Modalità di fusione dello sfondo con due immagini

Piuttosto che avere una sovrapposizione di colori su un'immagine, la sovrapposizione di due immagini insieme può avere un effetto piuttosto interessante. È facile come aggiungere due immagini di sfondo nella dichiarazione CSS. La scelta successiva è quella di avere un colore di sfondo (o meno). Se non si desidera un colore di sfondo, è possibile rimuoverlo e le immagini si fonderanno insieme a seconda della modalità di fusione scelta.

.two-image-stacked {
 background-image: url("image.jpg"), url("image-2.jpg");
 background-color: purple;
 background-blend-mode: lighten;
 }

Gradiente sulle modalità di fusione dello sfondo

Invece di utilizzare un solo colore, i gradienti possono anche dare alcuni effetti unici.

.gradient-on-image {
 background:
 linear-gradient(purple 0%, red 80%),
 linear-gradient(to right, purple 0%, yellow 100%),   url("image.jpg");
 background-blend-mode: screen, difference, lighten;
 }

Noterai anche che questo esempio ha più modalità di fusione dello sfondo. Se una modalità di fusione non è sufficiente, è possibile utilizzarne più.

Esempi di lavoro possono essere trovati in questo Codepen.

Mix di esempi di modalità di fusione

Fino a questo punto, l'attenzione era sullo sfondo. E se altri elementi della pagina volessero sfruttare i metodi di fusione? Questo non è un problema e sono disponibili gli stessi tipi di modalità di fusione.

Le cose sembrano le stesse dalle background-blend-modes con l'eccezione di iniziale, eredita e annulla.

• Iniziale: impostazione predefinita della proprietà che non imposta una modalità di fusione.
• Eredita: eredita il metodo di fusione dal relativo elemento padre.
• Annulla impostazione: rimuove la modalità di fusione da un elemento.

Esempio di base di una modalità di fusione mista con isolamento

Quando lavori con mix-blend-mode , ti imbatterai nella necessità di isolare. Innanzitutto, è importante sapere che è possibile "impilare" e questo è prezioso quando si lavora con molti livelli. Pensa a una pila di scatole. Ogni casella è separata dal gruppo. All'interno di ogni scatola possono esserci più livelli di oggetti. Questo modo di pensare aiuterà a determinare ciò che deve essere isolato.

Testo e immagini si mescolano con la modalità mix-blend

In questo esempio, il div con una classe di img-wrap contiene l'immagine. L'immagine ha una mix-blend-mode di moltiplicare. Quindi, in pratica, l'immagine sembra cadere in secondo piano.

Per evitare ciò, il div img-wrap (contenente anche il testo dell'intestazione) dovrebbe essere un nuovo insieme di contenuti impilati in modo che sia separato dallo sfondo dell'elemento body. Questo viene fatto con la proprietà di isolamento. Il valore predefinito è auto, quindi isolation: isolate; dovrà essere aggiunto.

Per verificarlo, commenta la proprietà di isolamento sul div con la classe di .img-wrap e controlla il risultato.

Ecco l'HTML:

<div class="img-wrap">
  <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" />
<h2>Outdoor Club</h2>
</div>

Ecco il CSS. Prestare molta attenzione isolate sul .img-wrap .

h2 {
  margin-bottom: 7rem;
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  font-size: 4rem;
  padding: .5em .25em;
  color: #007eae;
  text-shadow: 2px 3px 3px #000;
  mix-blend-mode: overlay;
}

.img-wrap {
    width: 45%;
    padding: 1%;
    position: relative;
    isolation: isolate;
    margin: 0 auto;
}

.img-wrap img {
  max-width: 100%;
  mix-blend-mode: multiply;
}

L'esempio funzionante può essere trovato su Codepen.

Testo ritagliato con la modalità mix-blend

Alcuni effetti di tipo interessanti possono essere creati con le modalità di fusione mix. C'è un modo semplice per ritagliare del testo. Lo sfondo è nascosto da un riempimento sull'elemento h1 .

Ecco l'HTML:

<div class="dark-cover">
  <h1>Outdoor Club</h1>
</div>

Quello che contiene <div> viene riempito con l'immagine di sfondo della foresta.

.dark-cover {
background-image: url(image.jpg);
text-align: center;
background-size: cover;
}

L'intestazione al suo interno ha uno stile con un colore di sfondo opzionale. L'intestazione ha un effetto trasparente con l'immagine di sfondo semi trasparente utilizzando mix-blend-mode di moltiplica:

.dark-cover h1 {
  margin: 0;
  font-size: 8rem;
  text-transform: uppercase;
  line-height: 1.9;
  color: #fff;
  background-color: green;
  mix-blend-mode: multiply;
}

L'esempio funzionante può essere trovato su Codepen.

Mix-blend-mode e SVG

I file SVG sono molto popolari sul Web e anche le modalità di fusione CSS funzionano bene con loro. Le forme possono essere facilmente mirate per dare loro la modalità di fusione desiderata.

Isolare è stato fondamentale anche in questo esempio. Senza isolare i cerchi, lo sfondo grigio interferirebbe.

Ecco il codice per creare il gruppo di cerchi:

<svg>
  <g class="isolate">
    <circle cx="60" cy="60" r="50" fill="red"/>
    <circle cx="100" cy="60" r="50" fill="lime"/>
    <circle cx="80" cy="100" r="50" fill="blue"/>
  </g>
</svg>

Ecco gli stili CSS:

body {
  background: #898989;
}
circle { 
  mix-blend-mode: screen; 
}  
.isolate { 
  isolation: isolate; 
}  

/* if this was not isolated, the gray background would impact the outcome */

Questo esempio può essere trovato su Codepen.

Supporto del browser per la modalità di fusione in background e la modalità di miscelazione in background

Il supporto del browser è abbastanza buono, ma non del tutto coerente per la modalità di fusione in background. Prima di iniziare un progetto che utilizza questa funzione, assicurati di controllare Posso usare. Attualmente, Edge e Safari non hanno supporto. Per gestire un supporto limitato e in base ai browser che devono essere supportati, una query di funzionalità CSS potrebbe essere una buona opzione. In caso contrario, pensare alle immagini "miscelate" come un miglioramento (non un requisito) potrebbe essere la soluzione migliore.

Il supporto del browser è leggermente migliore per la modalità mix-blend. È bene essere consapevoli di un supporto parziale. Ad esempio, Safari non supporta tonalità, saturazione, colore o luminosità.

Il modo migliore per imparare davvero cosa può essere progettato con le modalità di fusione è sperimentare. Gli esempi mostrati qui hanno appena graffiato la superficie. È incredibile che tipo di grafica può essere creata utilizzando le modalità di fusione. Questo è un grande passo avanti per ciò che si può fare sul web.

Il prossimo: i migliori plugin per WordPress per web designer

Ottieni più risultati che stai cercando dai tuoi plugin! Abbiamo ricercato, testato e compilato i migliori plugin per WordPress "pane e burro" che ogni web designer dovrebbe utilizzare! Che tu sia alla ricerca di un nuovo plug-in anti-spam, page-builder o SEO, questo elenco completo offre un po' di tutti i plug-in per le tue esigenze di WordPress. Amati da noi, dai nostri clienti e dai clienti dei nostri clienti, questi sono 20 dei migliori plugin per i designer di WordPress. Leggi l'intero elenco qui!

Questo tutorial è stato originariamente pubblicato il 23-1-2017. È stato aggiornato l'ultima volta il 16-2-2019.