Cómo usar las sombras de caja como fondos de deslizamiento al pasar el mouse

Publicado: 2019-01-30

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo usar sombras de cuadro como fondos de deslizamiento al pasar el mouse. Manejaremos tres ejemplos diferentes que se ven impresionantes en la página de inicio del Paquete de diseño de estilista personal, pero las posibilidades que tiene son realmente infinitas. Recrearemos cada uno de los fondos de deslizamiento paso a paso utilizando solo las opciones integradas de Divi.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial y sus diferentes ejemplos, echemos un vistazo al resultado.

Ejemplo 1

deslizar fondos

Ejemplo # 2

deslizar fondos

Ejemplo # 3

deslizar fondos

Cargar la página de inicio del paquete de diseño de estilista personal en una nueva página

Comience agregando una nueva página a su sitio web y cargue el diseño de la página de inicio de Personal Stylist. Aunque usaremos este diseño para lograr los tres ejemplos que se muestran arriba, puede usar este enfoque para cualquier tipo de diseño o sitio web en el que esté trabajando.

deslizar fondos

Recrear el ejemplo n. ° 1

deslizar fondos

Color de la sombra del cuadro de botones

¡Comencemos a recrear el primer ejemplo! Este ejemplo te ayuda a resaltar la sección del héroe. Lo primero que deberá hacer es abrir el Módulo de botones que puede encontrar en la primera columna y cambiar el color de la sombra del cuadro. Estamos haciendo esto para asegurarnos de que el color vaya bien con la sombra del cuadro rosa que agregaremos al pasar el mouse.

deslizar fondos

Configuración de la sección

Color de fondo predeterminado

Continúe abriendo la configuración de la sección. Asegúrese de que el color de fondo predeterminado siga siendo el mismo.

Color de fondo: # 2a2a2a

deslizar fondos

Colocar el cursor sobre el color de fondo

Cambia el fondo flotante.

Color de fondo: #ffffff

deslizar fondos

Sombra de cuadro predeterminada

Continúe agregando una Sombra de cuadro predeterminada a la sección.

Posición horizontal de la sombra del cuadro: 0px
Posición vertical de la sombra del cuadro: 0px
Color de sombra: rgba (255,137,159,0.82)
Posición de la caja de sombra: Sombra interior

deslizar fondos

Sombra de caja flotante

Cambia la posición horizontal de la sombra del cuadro. Agregue cualquier valor de elección.

Posición horizontal de la sombra del cuadro: 800px

deslizar fondos

Si desea que el efecto de deslizamiento aparezca de arriba a abajo, puede cambiar alrededor de la posición vertical de la sombra del cuadro.

Posición vertical de la sombra del cuadro: 650px

deslizar fondos

Transiciones

Por último, pero no menos importante, disminuya la duración de la transición en la pestaña avanzada para crear una transición rápida entre el color de fondo y el fondo de la sombra del cuadro.

Duración de la transición: 200 ms
Curva de velocidad de transición: facilidad

deslizar fondos

Recrear el ejemplo n. ° 2

deslizar fondos

Modificar el primer módulo de texto

Configuración de texto flotante

¡Pasemos al siguiente ejemplo! Abra el Módulo de texto que puede encontrar en la primera columna y cambie el color del texto al pasar el mouse.

Color del texto: claro

deslizar fondos

Borde flotante

Continúe cambiando el color del borde al pasar el mouse en la pestaña de diseño.

Color del borde: rgba (255,137,159,0.82)

deslizar fondos