Uso de las sombras de texto Hover para crear contenido interactivo con Div

Hacer que su sitio se destaque para sitios web similares puede ser difícil, pero una vez que logra hacer esto, casi siempre vale la pena el esfuerzo y el pensamiento que se ha puesto en él. Para ayudarlo a obtener inspiración, le mostraremos cómo crear contenido interactivo al crear sitios web con Div. El ejemplo que recrearemos en este tutorial funcionará muy bien para cualquier página en la que esté trabajando. Podrá compartir los hechos o información sobre la empresa utilizando el flotador utilizando las opciones de sombra integradas del texto de la división. También nos aseguramos de que estos efectos flotantes no se apliquen a dimensiones de pantalla más pequeñas, de modo que la información y la experiencia móvil no se pierdan.
¡Vamos a eso! Vista previa antes de lanzar la cabeza en el tutorial, para echar un vistazo al resultado que puede esperar. Escritorio

Móvil Nos aseguramos de que todas estas interacciones de viaje no se apliquen a dimensiones de pantalla más pequeñas. Usando la misma sección y módulos, obtendremos el siguiente resultado simple en su lugar:

Acercarse
El ejemplo que recrearemos es excelente para las páginas, pero puede hacer que funcione con cualquier palabra con 5 o 6 caracteres (coincidir con la estructura de la columna)
Cada uno de los caracteres se dedicará a un módulo de texto individual
Usamos una fila con un número suficiente de columnas para conectar los diferentes caracteres de la palabra y hacer que parezcan como si fueran creados en el mismo módulo.
De manera predeterminada, haremos que el texto del módulo de texto de texto coincida con el color de fondo de la sección
Para asegurarse de que el personaje permanezca legible, aplicaremos una sombra de texto blanco y el personaje
Una vez que coloque el personaje, la sombra del texto desaparecerá y el color del texto cambiará, lo que le da la sensación de que el texto se llena al colocar un personaje, aparecerá información adicional.
En un tamaño de pantalla más pequeño, los datos y / o información de la empresa estarán allí desde el principio
¡Comencemos a recrear!
Suscríbase a nuestro canal de YouTube Agregue una nueva sección de color de fondo, abra una página nueva o existente y agregue una sección regular. Abra la configuración de la sección y cambie el color de fondo.
Color de fondo: # 03006d
Extienda luego, acceda a la configuración de espaciado de la sección y agregue algunos rellenos personalizados en la parte superior e inferior.

Revestimiento superior: 50 px
Revestimiento inferior: 50 PX
Agregue una nueva fila La estructura de la columna continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna.

Dimensión Luego, acceda a la configuración de tamaño y permita que la fila ocupe todo el ancho de la pantalla. Este es un paso importante, porque nos permitirá determinar la distancia manualmente, utilizando unidades de visualización.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Espacio en el paso anterior, escapé de todas las configuraciones de tamaño predeterminadas que vienen con una nueva fila. Sin embargo, debemos agregar algo de relleno manual. Aquí, utilizamos unidades de visualización para garantizar que el resultado siga siendo el mismo en todas las dimensiones de la pantalla de escritorio.

ENLIZACIÓN IZQUIERDA: 9VW (escritorio), 5VW (tableta y teléfono)
Revelaje derecho: 5VW (tableta y teléfono)
Agregue un módulo de texto a la columna 1 Agregar contenido Después de que haya terminado de cambiar las filas, puede continuar y agregar el primer módulo de texto en la columna 1. Agregue el primer carácter como texto de párrafo y el contenido que desea aparecer como un texto de la lista. Los valores predeterminados para el texto, luego acceda a la pestaña Design y modifique la configuración predeterminada del texto del párrafo. Asegúrese de usar el mismo color para el fondo de texto y de sección.

El peso de la fuente de texto: Ultra Bold

Color de texto: # 03006d
Tamaño de texto: 27VW (escritorio), 0VW (tableta y teléfono)
La altura de la línea de texto: 1.1em
Fuerza de pelea de sombras de texto: 0.01em
Texto del color de la sombra: #ffffff
Orientación de texto: izquierda
Coloque el cursor en la configuración de texto para crear el hermoso efecto de flotar, necesitaremos cambiar estas configuraciones de texto del párrafo. Observe cómo ahora usamos una sombra completamente transparente del texto del texto para que desaparezca.
Color de texto: #ffffff


Text Shadow Color: RGBA (255,255,255,0)
Configuración predeterminada para el texto de la lista Continúe accediendo a la configuración de texto de la lista. Una parte importante de estas configuraciones es asegurarse de que el tamaño del texto en el escritorio sea “0px”, pero la adición “18px” como tamaño de las dimensiones de pantalla más pequeñas. Esto le asegurará que el texto de la lista aparece en dimensiones de pantalla más pequeñas, pero no en el escritorio sin que se planee.
Lista de peso de fuente desordenada: fácil



El color del texto de la lista desordenada: #fffff
Tamaño de texto de la lista desordenada: 0 PX (escritorio), 18 PX (tableta y teléfono)
Color de sombra del texto de la lista desordenada: RGBA (255,255,255.0)
Tipo de estilo de lista desordenado: Círculo
Posición del estilo de la lista no ordenada: sobresaliente El elemento de lista desordenado: 0 PX
Coloque el cursor en la configuración de texto que queremos que la lista de la lista aparezca en el flotador. Por lo tanto, cambiaremos alrededor del tamaño del texto al cursor. Asegúrese de que el tamaño del texto que usa en el cursor sea el mismo que el tamaño del texto que usa en el tamaño de pantalla más pequeño. Esto lo ayudará a asegurarse de que no haya un efecto de cambio a las dimensiones de pantalla más pequeñas.
Tamaño del texto de la lista no ordinaria: 18 PX
El espacio continúa accediendo a la configuración de separación del módulo y haciendo algunos cambios allí.


Margen inferior: 50 PX (tableta y teléfono)
Margen derecho: -4VW (escritorio), 0VW (tableta y teléfono)

Clone el módulo de texto 4 veces y coloque los duplicados en las columnas restantes ahora, después de haber terminado de cambiar el primer módulo en la columna 1, podemos continuar el módulo cuatro veces y colocar cada uno de los duplicados en las columnas restantes. En los próximos pasos, cambiaremos cada uno de los duplicados para que coincidan con el nuevo personaje.
Cambie el módulo de texto a la columna 2 Cambie el contenido Abra el duplicado en la columna 2 y cambie el contenido.
Cambie el espacio luego, acceda a la configuración de espaciado y cambie los valores de margen personalizado.

Margen inferior: 50 PX (tableta y teléfono)

Margen izquierdo: -2VW (escritorio), 0VW (tableta y teléfono)

Margen derecho: -2VW (escritorio), 0VW (tableta y teléfono)
Cambie el módulo de texto a la columna 3 Cambie el contenido de cambio y el contenido duplicado de la columna 3.
Cambie el espacio con la configuración de espaciado en la pestaña de diseño.
Margen inferior: 50 PX (tableta y teléfono)

Margen izquierdo: -5.5VW (escritorio), 0VW (tableta y teléfono) Margen derecho: 1.5VW (escritorio), 0VW (tableta y teléfono)

Cambie el módulo de texto a la columna 4 Cambie el contenido Continúe abriendo el módulo de texto en la columna 4 y modifique y el contenido aquí.
Cambie el espacio y luego acceda a la pestaña de diseño y cambie los valores de margen personalizado desde la configuración de espaciado.
Margen inferior: 50 PX
Margen izquierdo: -6VW (escritorio), 0VW (tableta y teléfono)

Margen derecho: 2VW (escritorio), 0VW (tableta y teléfono)

Cambie el módulo de texto en la columna 5 Cambie el contenido al último duplicado. Cambie el contenido del cuadro de contenido.
Cambie el espacio con la configuración de espaciado personalizado.
Margen inferior: 50 PX
Margen izquierdo: -7VW (escritorio), 0VW (tableta y teléfono)

Margen derecho: 3VW (escritorio), 0VW (tableta y teléfono)

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Los pensamientos finales saben lo importante que es distinguir su sitio web de otros sitios web. Con las opciones integradas del DIV, puede ser tan creativo como desee. Esta publicación es un ejemplo de cómo puede crear contenido interactivo en el flotador, asegurándose de que todo permanezca simple en las dimensiones de pantalla más pequeñas. Puede usar el ejemplo que recreé para cualquier página en la que esté trabajando actualmente. Es una excelente manera de compartir algunos datos e información adicionales sobre su empresa, mientras tiene una interacción con sus visitantes. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en los comentarios a continuación.