Come usare le ombre della scatola come sfondi di scorrimento al passaggio del mouse?

Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.

Questa settimana, come parte della nostra iniziativa di design Divi in ​​corso, ti mostreremo come utilizzare le ombre delle scatole come sfondi di scorrimento al passaggio del mouse. Tratteremo tre diversi esempi che sembrano sbalorditivi sulla homepage del Personal Stylist Layout Pack, ma le possibilità che hai sono davvero infinite. Ricreeremo ciascuno degli sfondi di scorrimento passo dopo passo utilizzando solo le opzioni integrate di Divi.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial e nei suoi diversi esempi, diamo un'occhiata al risultato.

Esempio 1

Esempio #2

Esempio #3

Carica la home page del pacchetto di layout stilista personale in una nuova pagina

Inizia aggiungendo una nuova pagina al tuo sito web e caricando il layout della home page di Personal Stylist. Sebbene utilizzeremo questo layout per realizzare tutti e tre gli esempi mostrati sopra, puoi utilizzare questo approccio per qualsiasi tipo di layout o sito Web su cui stai lavorando.

Ricrea l'esempio n. 1

Colore ombra della scatola dei pulsanti

Iniziamo a ricreare il primo esempio! Questo esempio ti aiuta a evidenziare la sezione degli eroi. La prima cosa che devi fare è aprire il Modulo pulsanti che puoi trovare nella prima colonna e cambiare il colore dell'ombra della casella. Lo stiamo facendo per assicurarci che il colore si abbini bene con l'ombra della scatola rosa che aggiungeremo al passaggio del mouse.

Impostazioni della sezione

Colore di sfondo predefinito

Continua aprendo le impostazioni della sezione. Assicurati che il colore di sfondo predefinito rimanga lo stesso.

• Colore di sfondo: #2a2a2a

Colore di sfondo al passaggio del mouse

Cambia lo sfondo al passaggio del mouse.

• Colore di sfondo: #ffffff

Ombra casella predefinita

Continua aggiungendo un Box Shadow predefinito alla sezione.

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 0px
• Colore ombra: rgba (255,137,159,0.82)
• Posizione dell'ombra nella scatola: Ombra interna

Ombra del riquadro al passaggio del mouse

Modificare la posizione orizzontale dell'ombra del riquadro. Aggiungi qualsiasi valore di scelta.

• Posizione orizzontale dell'ombra del riquadro: 800 px

Se vuoi che l'effetto di scorrimento appaia dall'alto verso il basso, puoi invece modificare la posizione verticale dell'ombra del riquadro.

• Posizione verticale dell'ombra del riquadro: 650 px

transizioni

Ultimo ma non meno importante, diminuisci la durata della transizione nella scheda Avanzate per creare una rapida transizione tra il colore di sfondo e lo sfondo dello scorrimento dell'ombra della casella.

• Durata della transizione: 200 ms
• Curva di velocità di transizione: facilità

Ricrea l'esempio n. 2

Modifica primo modulo di testo

Impostazioni testo al passaggio del mouse

Al prossimo esempio! Apri il modulo di testo che trovi nella prima colonna e cambia il colore del testo al passaggio del mouse.

• Colore del testo: chiaro

Confine al passaggio del mouse

Continua cambiando il colore del bordo al passaggio del mouse nella scheda Design.

• Colore del bordo: rgba (255,137,159,0.82)

Ombra casella predefinita

Quindi, vai alle impostazioni dell'ombra della casella e aggiungi un'ombra della casella predefinita.

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 0px
• Colore ombra: rgba (255,137,159,0.82)
• Posizione dell'ombra nella scatola: Ombra interna

Ombra del riquadro al passaggio del mouse

Cambia la posizione orizzontale al passaggio del mouse.

• Posizione orizzontale dell'ombra del riquadro: 520 px

transizioni

Ultimo ma non meno importante, aumenta la durata della transizione nella scheda Avanzate per creare una transizione graduale.

• Durata della transizione: 700 ms
• Curva di velocità di transizione: facilità

Copia e incolla gli stili del modulo nel terzo modulo di testo

Utilizziamo gli stessi stili di modulo anche per il terzo modulo di testo. Per risparmiare tempo, copieremo semplicemente gli stili del modulo del primo modulo di testo e li incolleremo nel terzo modulo di testo.

Modifica secondo modulo di testo

Impostazioni testo

Il secondo modulo di testo, tuttavia, è leggermente diverso. Apri il modulo e vai alle impostazioni del testo. L'unica cosa che devi fare è cambiare il colore del testo al passaggio del mouse.

• Colore del testo: chiaro

Confine al passaggio del mouse

Continua andando alle impostazioni del bordo e cambiando il colore del bordo al passaggio del mouse.

• Colore del bordo: rgba (255,137,159,0.82)

Ombra casella predefinita

È ora di aggiungere lo sfondo dello scorrimento! Inizia aggiungendo un'ombra di casella predefinita utilizzando le seguenti impostazioni:

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 0px
• Colore ombra: rgba (255,137,159,0.82)
• Posizione dell'ombra nella scatola: Ombra interna

Ombra del riquadro al passaggio del mouse

Modifica la posizione verticale dell'ombra del riquadro al passaggio del mouse.

• Posizione verticale dell'ombra del riquadro: 500 px

transizioni

Ultimo ma non meno importante, aumenta anche la durata della transizione di questo modulo di testo.

• Durata della transizione: 700 ms
• Curva di velocità di transizione: facilità

Ricrea l'esempio n. 3

Modifica impostazioni riga

Dimensionamento

Al prossimo e ultimo esempio! Inizia aprendo le impostazioni della riga e apporta alcune modifiche alle impostazioni di dimensionamento.

• Rendi questa riga a larghezza intera: Sì
• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 2

Spaziatura

Continua aggiungendo anche un'imbottitura personalizzata alla riga.

• Imbottitura sinistra: 10vw
• Imbottitura destra: 10vw
• Imbottitura sinistra colonna 2: 15vw (desktop), 0vw (tablet e telefono)

Ombra casella predefinita

Quindi, aggiungi un'ombra di casella predefinita alla riga.

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 0px
• Colore ombra: #ff899f
• Posizione dell'ombra nella scatola: Ombra interna

Ombra del riquadro al passaggio del mouse

Cambia la posizione orizzontale al passaggio del mouse.

• Posizione orizzontale dell'ombra del riquadro: 50 px

transizioni

Stiamo anche modificando la durata della transizione e il ritardo della transizione nella scheda Avanzate.

• Durata della transizione: 1000 ms
• Ritardo di transizione: 700 ms
• Curva di velocità di transizione: facilità

Modifica le impostazioni della sezione

Rimuovi taglia

Dopo aver modificato le impostazioni della riga, vai avanti e apri le impostazioni della sezione. Passa alla scheda Design e reimposta la larghezza facendo clic con il pulsante destro del mouse e facendo clic su Ripristina.

Rimuovi bordo

Fai la stessa cosa anche per la larghezza del bordo.

Ombra casella predefinita

Continua aggiungendo un'ombra di casella predefinita.

• Posizione orizzontale dell'ombra del riquadro: 0px
• Posizione verticale dell'ombra del riquadro: 0px
• Colore ombra: #2a2a2a
• Posizione dell'ombra nella scatola: Ombra interna

Ombra del riquadro al passaggio del mouse

Modifica la posizione orizzontale dell'ombra del riquadro al passaggio del mouse.

• Posizione orizzontale dell'ombra del riquadro: 60 px

transizioni

E per completare il progetto, aumenta la durata della transizione nella scheda Avanzate.

• Durata della transizione: 1000 ms

Anteprima

Ora che abbiamo eseguito tutti i passaggi, diamo un'ultima occhiata ai tre diversi esempi che abbiamo ricreato passo dopo passo.

Esempio 1

Esempio #2

Esempio #3

Pensieri finali

In questo post, ti abbiamo mostrato come utilizzare le ombre delle scatole come sfondi di scorrimento solo con le opzioni integrate di Divi. Questo tutorial fa parte della nostra iniziativa di design Divi in ​​corso in cui ogni settimana cerchiamo di aggiungere qualcosa in più alla tua cassetta degli attrezzi. Speriamo che questo tutorial ti ispiri a utilizzare le ombre della scatola in un modo unico e creativo. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!