Las Fuentes juegan un papel clave en el dise o Visual de los sitios web. Sirven no solo para transmitir informaci n, sino tambi n para crear un estado de nimo y enfatizar el estilo. En una de esas situaciones, es posible que desee llamar la atenci n sobre un texto en particular, es usar Fuentes en diagonal.
La fuente diagonal es una forma de rotar el texto en un ngulo espec fico, lo que lo hace m s visible y original. Este efecto se puede utilizar para t tulos, citas, banners y otros elementos de texto.
En este art culo, le ofrecemos una gu a paso a paso sobre c mo crear una fuente diagonal en su sitio web. Revisaremos los diferentes m todos y explicaremos cada paso en detalle. Listo para empezar? Vamos a empezar!
- C mo crear un efecto de texto en diagonal
- Paso 1: Elegir la fuente adecuada
- Paso 2: usando CSS para inclinar el texto
- Medida 3: Marcado y posicionamiento correctos de los elementos
C mo crear un efecto de texto en diagonal
. Esta propiedad le permite aplicar la transformaci n a un elemento de p gina web.
Para crear un efecto de texto en diagonal, podemos utilizar el siguiente c digo CSS:
body {top: 50%;
). Luego creamos la clase
left: 50%
. aplicamos la transformaci n
translate(-50%, -50%) rotate(-45deg)para girar el elemento en diagonal. Valor
translate(-50%, -50%)
centra un elemento en relaci n con su elemento principal.
Al final, para que el texto permanezca en la misma l nea, usamos la propiedad
white-space: nowrap
- para el elemento
- dentro de la clase
- diagonal-text
.
Ahora, para crear texto en diagonal, simplemente agregue un elemento con una clase
Antes de comenzar a crear una fuente en diagonal, debe elegir la fuente adecuada para su sitio web. La elecci n de la fuente depende del estilo Visual general de la p gina, as como del prop sito y el contenido del contenido.
Elija una fuente con detalles claros y distinguibles.
Despu s de seleccionar la fuente adecuada, puede pasar al siguiente paso: ajustar los estilos y la ubicaci n del texto en diagonal en la p gina.
transform
skew
. Por ejemplo, la siguiente secci n de c digo CSS inclinar el texto 45 grados a la derecha:
transform: skew(45deg);
}
Para inclinar el texto a un ngulo diferente, puede cambiar el valor dentro de la funci n
transform: skew(-30deg);
}
El uso de propiedades CSS
transform-origin