Cómo crear patrones de texto curvados en la división

Si está buscando una forma única de presentar texto en una página web, puede ser útil saber cómo crear modelos de texto curvos en la división. Este tipo de diseño funcionaría para construir gráficos personalizados o modelos de encabezado creativo en la división sin tener que usar un editor de fotos. Por lo general, esto implica HTML y CSS más completo para lograr, pero con DIV, CSS personalizado en un mínimo y tiene tantas opciones construidas para diseñar fácilmente su texto de maneras únicas. En este tutorial, le mostraremos cómo crear algunos modelos de letras curvas que puede usar como una plantilla útil para sus propios fines. Si hay algo, puede agregar algo nuevo al conjunto de herramientas de diseño para el futuro.
Vamos a empezar. Tire de la vista con una breve mirada a los proyectos de texto curvo que construiremos en este tutorial.



Descargue el esquema de ejemplos de diseño de animación para letras de forma gratuita para poner sus manos en los dibujos de texto curvo, primero tendrá que descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? La idea básica detrás de la creación del texto curvo en la división para crear texto curvo utilizando el método en este tutorial, debe agregar cada letra del texto en un módulo de texto separado (deberá usar una fuente monoespacial para obtener los mejores resultados. ). Dale al módulo de texto una altura establecida. Luego, debe darle a cada texto una posición absoluta centrada, para que esté apilada uno encima del otro.
Esto es importante porque queremos que cada letra gire desde el mismo punto central. Después de eso, puede usar opciones de transformación de la división para rotar cada letra a lo largo del eje Z para crear el texto curvo (piense en usar una brújula en la clase de matemáticas para dibujar un círculo). Además, observe que la altura de cada módulo de texto determina el radio del círculo, que también aumentará la circunferencia del círculo y, como resultado, más espacio entre las letras.

Aquí hay un ejemplo de 8 módulos de texto rotados con pasos de 45 grados para crear un aspecto perfecto para el texto. Agregué un borde blanco alrededor de cada módulo, por lo que puede ver fácilmente la rotación. Y aquí hay un ejemplo de los mismos módulos de texto que se giran en 20 grados.
Las nociones básicas se suscriben a nuestro canal de YouTube para comenzar, cree una nueva página en Div. Luego, déle un título a la página e implementa el Builder Divi en el frente. Seleccione la opción “Construir desde cero”. ¡Ahora estás listo para irte! Creando el diseño del texto curvo la creación de la sección y la fila primero crean una sección ordinaria con una fila con una columna.

Antes de agregar nuestros módulos, continúe y actualice la configuración de la sección de la siguiente manera:

Color izquierdo del gradiente de fondo: # 1E003D

Color derecho del gradiente de fondo: # 121212
Tipo de gradiente: radial
Imagen de fondo: [Inserte la imagen del logotipo alrededor de 100 PX con 100 PX] El tamaño de la imagen de fondo: el tamaño real

Guarde la configuración, luego pase a la configuración de la fila y actualice lo siguiente:
El ancho de la canaleta: 1

Ancho: 100%
Altura mínima: 400 PX
Altura: 40 VW
Altura máxima: 600 PX
Trenza personalizada: 0 px arriba, 0 px abajo
Luego agregue el siguiente CSS personalizado en el elemento principal de la columna para asegurarse de que todos los módulos de texto permanezcan horizontales:
CSS Elemento principal de la columna: Display: Flex;
Justify-Concursing: Centro;
Creación de módulos de texto para cada letra Ahora estamos listos para agregar nuestro primer módulo de texto con nuestra primera letra. Para esto, agregue un nuevo módulo de texto en la fila y actualice lo siguiente:
Contenido: D (solo la única letra) Fuente de texto: Ubuntu Mono (cualquier fuente monoespacial servirá)

Color de texto de texto: #ffffff

Tamaño de texto de texto: 5VW (escritorio), 40 px (teléfono)
Orientación de texto: centro
Altura mínima: 200 PX
Altura: 20 VW
Altura máxima: 300 PX
Luego actualice el origen de la transformación en la parte inferior. Esto será importante para determinar dónde ocurre la rotación del texto. Queremos que el módulo de texto gire en la parte inferior del módulo. Incluso si este primer módulo de texto no tendrá que ser girado, es importante agregarlo aquí, por lo que podemos transportar esta opción cada vez que duplicamos el módulo de texto para letras adicionales.
Transformación del origen: 100% (o debajo)
Luego agregue el siguiente CSS personalizado al elemento principal para darle al módulo de texto una posición absoluta. Posición: ¡Absoluto! Importante;

Creando y girando los otros módulos de texto para crear el resto de las letras, copiaremos el módulo de texto. Una vez que duplicamos el módulo de texto, todo lo que tenemos que hacer es actualizar la letra y luego aumentar la rotación en 45 grados con cada nuevo módulo. Debido a que los módulos de texto se apilarán por encima de cada uno en la parte delantera, es mejor usar el módulo de vista de estructura alambre para hacer estas actualizaciones.
Continúe y copie el módulo de texto y luego actualice lo siguiente:
Contenido: I.

Eje de transformación de rotación Z: 45 grados
Continúe el proceso de duplicación del módulo de texto y luego actualice el módulo de texto con una nueva letra y aumente la rotación en 45 grados. Aquí hay un desglose de las seis actualizaciones de los módulos de texto restantes: Text 3 Módulo
Contenido: V.
Eje de transformación de rotación Z: 90 grados

Módulo de texto 4
Contenido: I.
Eje de transformación de rotación Z: Texto de 135degmodo 5
Contenido: D.
Eje de transformación de rotación Z: 180 grados
Módulo de texto 6
Contenido: I.
Eje de transformación de rotación Z: 225 grados
Módulo de texto 7
Contenido: V.
Eje de transformación de rotación Z: 270 grados
Módulo de texto 8
Contenido: I.
Eje de transformación de rotación Z: 315 grados
¡Eso es todo! Ahora verifique el resultado final. Resultado final
Ajuste del tamaño del texto y el grado de rotación para el texto más largo Si desea ajustar el texto curvo para opciones de diseño de texto más grandes, puede cambiar el tamaño del texto y transformar la rotación de cada módulo de texto. Implemente el modo de vista de estructura de alambre y luego use las características de elección múltiple para seleccionar todos los módulos de texto que contienen letras curvas. Luego haga clic para abrir la configuración de uno de los módulos de texto seleccionados para abrir los elementos que actualizarán todos los módulos seleccionados simultáneamente.
En la configuración del elemento, cambie el tamaño de texto del texto a 40 PX en el escritorio.
Guarde la configuración y luego abra la configuración para cada uno de los módulos de texto y actualice las letras y la rotación para cada uno. Deje el primer módulo de texto con una rotación de 0 grados y luego aumente la rotación del eje Z en 10 grados para cada módulo de texto siguiente. Luego copie el módulo de texto para obtener aún más letras, según sea necesario. En este ejemplo, exhibiré “elegante. Aquí está el desglose de la letra de contenido y la rotación necesaria para cada módulo de texto.

Módulo de texto 1


Contenido: E.

Eje de transformación de rotación z: 0deg

Módulo de texto 2
Contenido: L.
Eje de transformación de rotación Z: 10 grados
Módulo de texto 3
Contenido: E.
Eje de transformación de rotación Z: Texto de 20 Grademodium 4
Contenido: G.
Eje de transformación de rotación Z: 30 grados
Módulo de texto 5
Contenido: A.
Eje de transformación de rotación Z: 40 grados
Módulo de texto 6
Contenido: N.
Eje de transformación de rotación Z: 50 grados
Módulo de texto 7
Contenido: T.
Eje de transformación de rotación Z: 60 grados
Módulo de texto 8
contenido:.
Eje de transformación de rotación Z: 70 grados
Módulo de texto 9
Contenido: T.
Eje de transformación de rotación Z: 80 grados
Módulo de texto 10
Contenido: H.
Eje de transformación de rotación Z: 90 grados
Módulo de texto 10
Contenido: E.
Eje de transformación de rotación Z: 100 grados
Módulo de texto 11
Contenido: M.
Eje de transformación de rotación Z: 110 grados
Módulo de texto 12
Contenido: E.
Eje de transformación de rotación Z: 120 grados
Módulo de texto 13
Contenido: S.
Eje de transformación de rotación Z: 130 grados
Aquí está el resultado hasta ahora.
Una manera fácil de ajustar la rotación de todo el texto es aplicar una transformación rotada en una fila. Abra la configuración de la fila y use el disco de control del índice Z para colocar el texto curvo donde desee.
Aquí está el diseño final.