Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Cómo crear un efecto de texto dividido vertical con CSS

Ya hemos aprendido cómo usar CSS para crear un efecto de texto dividido en diagonal en este sitio, por lo que ahora le mostraremos cómo hacer el mismo efecto horizontalmente. Este es uno de esos efectos que parece que puede ser difícil o complicado de crear, pero el código es realmente muy sencillo. La mejor parte es que no es uno de esos tutoriales de efectos de texto en los que no funciona o el espaciado y los márgenes deben cambiarse si cambia el texto utilizado en el tutorial. Este código funciona con casi cualquier texto que pueda escribir, así que siéntase libre de usarlo para sus propios proyectos.

El HTML

Para comenzar, necesitamos algo de HTML. Aquí es donde definimos lo que nuestro texto va a decir. Eche un vistazo al fragmento a continuación para ver cómo debería verse: es un poco diferente de su etiqueta de texto típica.
<h1 data-header = "Sideways"> Sideways </h1>
Como puede ver, le dimos a nuestra etiqueta <h1> un atributo llamado "encabezado de datos", con un valor que coincide exactamente con el texto dentro de la etiqueta. Esto es super importante. Si no recuerda agregar este atributo, o hacer que el texto en el atributo coincida con su texto real, entonces el efecto no sucederá y terminará con un texto de aspecto súper confuso.

El CSS

Este efecto requiere sorprendentemente poco CSS para lograrlo. Todo lo que realmente necesitamos es un código que divida el color de fondo a la mitad (mitad blanco y mitad negro, en este caso) que logramos usando la propiedad de gradiente lineal, algún código que estiliza el texto real (posicionamiento, color, fuente) familia, etc.) y, aquí es donde sucede la magia, un código que usa el pseudo-selector antes del atributo de encabezado de datos para crear una capa adicional de texto en la mitad de la pantalla que tiene un fondo blanco. Este será el texto de color negro, mientras que el texto de color blanco y en la mitad derecha de la pantalla es el texto de la etiqueta <h1> real.
Eche un vistazo al código a continuación para verlo más claramente.
h1 {
 font-family: "Futura";
 tamaño de fuente: 9vw;
 arriba: 50%;
 izquierda: 50%;
 margen: 0;
 transformar: traducir (-50%, -50%);
 posición: absoluta;
 color: #fff;
 espacio en blanco: nowrap;
}
h1: antes de {
 contenido: attr (encabezado de datos);
 desbordamiento: oculto;
 posición: absoluta;
 izquierda: 0;
 arriba: 0;
 ancho: 50%;
 color: # 000;
 }
Ahora su HTML debería verse así:
Captura de pantalla 2017-04-30 a las 2.20.41 PM
Ahora que conoce los conceptos básicos para crear este efecto, no tenga miedo de ser creativo con sus colores, fuentes, colores de fondo ... el mundo es su ostra y este tutorial de CSS es perfecto para personalizar, porque el código es tan claro que las personalizaciones son realmente bastante simples.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas