Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori
Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Html e css
Autore:
18 mar 2019

Oggi vi spiegherò come usare i CSS per creare splendidi effetti di dissolvenza e mascheramento con testi, immagini e colori, quegli effetti che di solito si ottengono con i programmi più avanzati di fotoritocco. I vantaggi di utilizzare le proprietà CSS al posto di immagini ritoccate sono molteplici, dalla definizione, agli allineamenti, alla possibilità di animare i nostri effetti e non ultimo la facilità di sostituire e aggiornare sia i contenuti testuali che il tipo di effetto.
Prima di entrare nel merito del metodo vi do un piccolo suggerimento: Visto che andremo a creare degli effetti grafici all’interno e intorno a dei testi meglio usare dei font belli corposi, tipo “Alfa Slab One", o “Montserrat” rigorosamente bold;

I metodi che andrò a spiegare sono due:



  • Il primo utilizza la proprietà CSS Mix-blend-mode. Con questo metodo gli effetti avvengono dal mixaggio di due elementi in un concetto di mascheramento in cui le forme (in questo caso i testi) stanno sul livello in primo piano e usano il colore per determinare quanto della forma mostri l’elemento sullo sfondo.

  • Il secondo utilizza la proprietà CSS background-clip: text. In questo caso l’effetto si attribuisce direttamente al testo tramite un’unica classe dove assegno alla cella del testo si l’immagine di background che il comando di ritagliare l’immagine sulla forma del testo (.background-clip: text).


1. Mix-blend-mode



Webmouser



Come ho anticipato precedentemente l’HTML conterrà due elementi, quello di sfondo contenente l’immagine (.back) e quello in primo piano con il testo (.writing):

<div class="back">

<p class="writing">Webmouser</p>
</div>

Ai quali assegnerò le seguenti proprietà CSS:

.back {

background: url("image.jpg") center;
}
.writing {
color: white;
background-color: #1d2d5f;
mix-blend-mode: multiply;
}

Nell’effetto generato dalla proprietà “multiply” il bianco della scritta viene interpretato come una trasparenza, mentre tutto intorno alla scritta soltanto le tonalità dell’immagine più scure del background-color rimangano inalterate.

Possiamo assegnare altri valori all’attributo mix-blend-mode:


  • mix-blend-mode: screen (da abbinare ad un color: black e ad un background-color chiaro);

    Webmouser




  • mix-blend-mode: darken (da abbinare ad un color: white e ad un background-color scuro);

    Webmouser




  • mix-blend-mode: lighten (da abbinare ad un color: black e ad un background-color chiaro)

    Webmouser





2. background-clip: text


Webmousers

La proprietà background-clip: text ci permette di ritagliare uno sfondo sulla forma del testo, in questo modo:

HTML

<p class="writing">Webmouser</p>

CSS

.writing {

background: url("image.jpg") center;
background-clip: text;
color: transparent;
}

Quale metodo utilizzare?


Se il mix-blend-mode permette la possibilità di applicare al nostro testo transizioni animate e pseudo-classi come :hover, oltre ad una casistica più ampia di risultati estetici, il background-clip: text ci garantisce di vedere il nostro effetto su ogni browser, sempre se non ci dimentichiamo di assegnargli il prefisso -webkit.
Adesso non vi resta che scegliere uno dei due metodi per aggiungere quel tocco di creatività in più al vostro lavoro, ricordandovi di testate i risultati su più browser e soprattutto di gestire al meglio il vostro tempo.

I più visti

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori

Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Organizzare la comunicazione sul web

Breve guida per le piccole imprese

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS

Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Centrare un DIV dentro un altro DIV

5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap

Come creare un e-commerce di successo

Gli italiani acquistano on-line?