Oxygen Builder - Effetto modalità fusione

Introduzione

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.

Esempio di modalità fusione

Oxygen Builder Modalità Fusione

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.

Settaggio Font

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.

Diminuiamo l'altezza linea e centriamo il testo

Quindi, andando in Advanced > Borders, aggiungeremo dei bordi sulla parte superiore e inferiore di 34 pixel.

Aggiungiamo brodi Top e Bottom

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.

Diamo un padding top e bottom per distaccare il testo dai bordi

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.

Immagine sovrapposta al testo

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.

il testo si fonde con l'immagine

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.

Esempio di modalità fusione

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.

Conclusioni

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.

Grazie per aver letto il mio articolo! Spero che tu abbia trovato informazioni utili per migliorare il tuo sito web. Se hai apprezzato il contenuto, condividilo con i tuoi contatti tramite i pulsanti di condivisione sui Social o via Email.

Nel mio Blog, troverai altri articoli su web design e ottimizzazione siti web.

Per restare aggiornato, seguimi sui Social o iscriviti alla Newsletter.

Se hai domande o proposte, scrivimi a info@marioarrichiello.com.

Grazie ancora per la tua visita e spero di rivederti presto!

Mario Arrichiello

Categorie

Post Recenti

Intelligenza Artificiale nel Web Design: Rivoluzione Creativa e Funzionale Intelligenza Artificiale nel Web Design: Rivoluzione Creativa e Funzionale - Immagine in evidenza
Nell'era digitale in rapida evoluzione, il web design è diventato il biglietto da visita di qualsiasi attività online. La competizione […]

Leggi
Web designer cosa fa e quanto guadagna? Web Designer Cosa Fa - Immagine in evidenza
Il web design è una professione sempre più richiesta e apprezzata nel mondo digitale. Ma chi è e cosa fa […]

Leggi
Ninja Forms Come Creare Moduli di Contatto su WordPress Ninja Forms Come Creare Moduli di Contatto su WordPress - Immagine in evidenza
Creare moduli di contatto su WordPress è essenziale per interagire con i tuoi visitatori e raccogliere informazioni importanti. In questo […]

Leggi

Resta Aggiornato

Resta sempre al passo con le ultime tendenze del Web Design e dell'Ottimizzazione Siti Web.
Iscriviti Ora Alla Nostra Newsletter!

Follow

Copyright 2023  © All rights Reserved
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram