In questo tutorial ti mostrerò come creare un effetto modalità fusione molto interessante. Se non conosci bene questo page builder ti invito a leggere questa breve introduzione a Oxygen Builder. Bene, torniamo a noi, come potrai notare appena subito questo paragrafo, abbiamo un'immagine e del testo. Il testo è sopra l'immagine e utilizzando la funzione modalità fusione di Oxygen Builder, faremo in modo che l'immagine passi attraverso il testo ma sia nascosta altrove. Andiamo ora a vedere come realizzarlo.
La prima cosa da fare sarà aggiungere una sezione e all'interno della sezione metteremo un heading. Scriviamo ciò che ci pare, in questo esempio scriveremo "MODALITÀ FUSIONE" e useremo il font Oswald con una dimensione del testo di 180 pixel. Il testo sarà nero e avrà un peso del font di ottocento.
Successivamente, andiamo in Advanced > Typography e impostiamo un'altezza di linea di 0.8, in modo da avere il testo leggermente sovrapposto, ed infine centriamo tutto.
Quindi, andando in Advanced > Borders, aggiungeremo dei bordi sulla parte superiore e inferiore di 34 pixel.
Inoltre, a seconda delle nostre preferenze di design, potremmo distaccare il testo dai bordi appena inseriti. Per farlo andiamo in Advanced > Size & Spacing e diamo del padding superiore ed inferiore al nostro Heading a seconda dei nostri gusti. In questo esempio daremo un padding top di 13px e un padding bottom di 21px.
Adesso, andremo a creare l'effetto modalità fusione, in cui l'immagine passa attraverso il testo. Per farlo, aggiungiamo un'immagine nella sezione. Possiamo scegliere un immagine dalla nostra libreria o caricare un immagine esterna, possibilmente un immagine abbastanza scura. Ora dobbiamo posizionare l'immagine dietro il testo. Per fare questo selezioniamo l'immagine, andiamo in Advanced > Layout e impostiamo "position: absolute; top: 0". Successivamente, andiamo alla sezione e centriamo tutto.
Ora, come puoi vedere dall'immagine su, avremo la nostra immagine sovrapposta in modo da nascondere il testo. Per creare l'effetto modalità fusione dovremo seguire alcuni semplici ma importanti passaggi. Selezioniamo l'immagine e andiamo in Advanced > Effect. Successivamente, selezioniamo "opacity" e, sotto "mix blend mode", scegliamo "screen". Quello che fa la modalità fusione "screen" è far sì che i pixel bianchi rimangano bianchi e i pixel neri rimangano del colore originale. Imposteremo quindi il colore di sfondo della sezione su bianco facendo scomparire l'immagine in corrispondenza dello sfondo, mentre il testo, che è nero, farà passare l'immagine. Il risultato ottenuto sarà come l'immagine sotto.
Puoi anche sperimentare usando colori diversi, otterrai effetti diversi. Il bianco non lascerà passare niente, mentre il nero lascerà passare tutto. Infine, l'ultima cosa che ci resta da fare è: Selezionare la sezione, andare in Advanced > Layout e impostare l'overflow su "hidden" in modo che l'immagine non fuoriesca dalla sezione.
Questo è come creare un effetto modalità fusione utilizzando Oxygen Builder. Tieni presente che le modalità di fusione sono una nuova funzione di CSS e sono relativamente sperimentali. Questo CSS è supportato solo dai browser moderni e non funziona in Internet Explorer o in Microsoft Edge. Tienilo a mente. È importante sapere queste cose e, man mano che il supporto dei browser viene aggiunto per questa funzionalità, potrai utilizzarla nei tuoi progetti e farla funzionare ovunque.
In questo tutorial abbiamo visto come creare un effetto modalità fusione dello schermo con Oxygen Builder davvero molto carino. Grazie alla funzionalità di fusione, abbiamo reso visibile l'immagine attraverso il testo, ma solo dove il testo si sovrapponeva all'immagine. Anche se la modalità fusione è una funzionalità relativamente sperimentale e supportata solo dai browser moderni, è importante tenere in considerazione queste tecniche per restare aggiornati sulle ultime tendenze di design e poter utilizzarle in futuro.