Los efectos de fuente pueden ser una forma hermosa y efectiva de llamar la atenci n sobre una parte espec fica del texto o agregar estilo al dise o de una p gina web. Uno de estos efectos es texto sobre l nea o texto super ndice.
El texto super ndice se muestra por encima del texto normal, creando la ilusi n de su elevaci n o importancia. Gracias a este efecto, es posible resaltar palabras clave, t rminos, t tulos o enfatizar ciertas frases. En este art culo, veremos c mo crear un efecto de fuente sobre una cadena con HTML y CSS.
Para crear un efecto de super ndice de texto, puede usar etiquetas HTML y . La etiqueta hace que el texto sea super ndice y la etiqueta haga que el texto sea sub ndice. Para que el texto aparezca sobre una l nea, debe aplicar estilos con CSS.
C digo HTML para crear un efecto de super ndice:
Este texto se mostrar encima de la l nea.
Y este texto se mostrar debajo de la l nea.
- Paso 1: Elegir la fuente base
- Paso 2: Crear un contenedor envolvente
- Paso 3: Agregar pseudo-elemento
- Paso 4: Establecer propiedades para el pseudo-elemento
- Paso 5: Aplicar efecto al texto
- Paso 6: m s ajustes y mejoras
Paso 1: Elegir la fuente base
Antes de crear un efecto de fuente sobre una l nea, debe seleccionar la fuente base que se usar para el texto.
La fuente b sica es la base del dise o y tiene un impacto en la legibilidad general y el estilo de su sitio. Por lo tanto, al elegir la fuente base correcta, puede crear un dise o armonioso y atractivo.
Al elegir una fuente base, tenga en cuenta factores como:
- Legibilidad: la fuente debe ser f cil de Leer, incluso en tama os peque os;
- Estilo: la fuente debe coincidir con el estilo general de su sitio web;
- Multiplataforma: elija una fuente que funcione en diferentes sistemas operativos y dispositivos;
- Accesibilidad: tenga en cuenta las Fuentes que admiten diferentes idiomas y caracteres especiales.
Las Fuentes b sicas populares son Arial, Helvetica, Times New Roman, Verdana y Calibri. Elija una fuente que se adapte a sus necesidades y preferencias.
Paso 2: Crear un contenedor envolvente
- float: left;
- .
Aseg rese de que el contenedor est ubicado frente al texto que desea ajustar en el c digo HTML original. Por ejemplo, si desea ajustar el texto que est despu s de un contenedor, coloque el contenedor delante de ese texto.
Todos estos pasos le permitir n crear un contenedor envolvente y establecer el efecto de fuente del texto sobre la l nea. Despu s de seguir estos pasos, puede personalizar a n m s los estilos de contenedor y texto con CSS para lograr el aspecto y el efecto que desee.
Paso 3: Agregar pseudo-elemento
Para crear un efecto de fuente sobre una cadena, usaremos el pseudoelemento: before. Este pseudo elemento le permite agregar contenido adicional antes del elemento especificado.
Para agregar un pseudoelemento: before a un elemento, necesitamos especificar su posici n, por ejemplo, relative o absolute, y luego establecer las propiedades deseadas para el pseudoelemento.
En nuestro caso, queremos crear un efecto que se parezca a la fuente que est encima de la l nea. Para hacer esto, agregaremos el pseudoelemento :before al elemento al que queremos aplicar este efecto.
| En CSS, estableceremos las siguientes propiedades para el pseudo-elemento: before: | Propiedad |
| Valor | content |
| Texto | position |
| absolute | top |
| -10px | left |
| 0 | z-index |
| -1 | color |
| color de texto actual | font-size |
Tama o de fuente aumentado
Con la propiedad content, especificamos qu texto debe mostrarse en el pseudo-elemento. En nuestro caso, ser a solo una cadena de "Texto".
La propiedad position especifica la posici n del pseudoelemento. Usamos el valor absolute para permitir que el pseudo elemento se mueva libremente a trav s del documento.
Las propiedades top y left indican el punto donde se mostrar el pseudoelemento. Establecemos top: - 10px para posicionar el pseudo elemento sobre una fila de 10px.
Utilice la propiedad Z-index para establecer el orden de las capas de los elementos. Un valor de -1 indica que el pseudo elemento debe estar debajo del texto principal.
La propiedad color especifica el color del texto del pseudo-elemento. Usamos el valor del color actual del texto para garantizar la coherencia con el resto del contenido.
Finalmente, con la propiedad font-size, podemos aumentar el Tama o de fuente del pseudoelemento para causar un efecto de texto sobre la cadena.
Paso 4: Establecer propiedades para el pseudo-elemento
content
tener un pseudo elemento para especificar el texto que se mostrar sobre la l nea. Por ejemplo, si queremos que el texto "Sobre la l nea" aparezca sobre la l nea, podemos usar el siguiente c digo:
absolute
para fijar la posici n del pseudoelemento sobre el texto principal. Para ello a adimos el siguiente c digo:
top
con el valor de un n mero negativo para desplazarlo hacia arriba. Por ejemplo, para desplazar un pseudoelemento 10 p xeles m s alto, podemos agregar el siguiente c digo:
::before { top: -10px; }
Tambi n puede especificar el color del texto, el Tama o de la fuente, el grosor de la fuente y otras propiedades para obtener el efecto de fuente deseado sobre la l nea.
Paso 5: Aplicar efecto al texto
Ahora que hemos configurado todo el marcado HTML y los estilos CSS para nuestro efecto de fuente sobre la l nea, aplic moslo al texto. Para hacer esto, necesitaremos agregar una clase al elemento deseado en la p gina.
class
- y especifique el nombre de la clase que cre para el efecto de fuente sobre la l nea. Por ejemplo:
- - aplicar efecto al t tulo de tercer nivel
- aplicar el efecto al p rrafo
3. Guarde los cambios y actualice la p gina en el navegador. El elemento seleccionado ahora debe Mostrar el texto con el efecto de fuente aplicado sobre la l nea.
Tenga en cuenta que puede aplicar este efecto a varios elementos en una p gina simplemente agregando la clase correspondiente a cada elemento, como se muestra arriba.
Paso 6: m s ajustes y mejoras
Despu s de crear un efecto de fuente sobre la l nea, puede agregar algunos ajustes y mejoras adicionales para que su texto se vea a n m s atractivo y profesional.
}
2. Cambiar el color del texto: tambi n puede cambiar el color del texto del efecto de fuente sobre la l nea para que coincida con su dise o o preferencias visuales. Use la propiedad 'color' para esto.
.text-effect {color: #333;