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
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);
- mix-blend-mode: darken (da abbinare ad un color: white e ad un background-color scuro);
- mix-blend-mode: lighten (da abbinare ad un color: black e ad un background-color chiaro)
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.