Subrayado de texto: ahora con diferentes colores y más efectos

Subrayado de texto: ahora con diferentes colores y más efectos

La tipografía es cada vez más importante en el diseño web, especialmente desde la introducción de las fuentes web. Sin embargo, subrayar el texto siempre ha sido un esfuerzo un tanto monótono.

Cambiar el color y el estilo del subrayado fue un proceso complicado. El atributo expandido de CSS3 «decoración de texto» ahora le brinda un margen de maniobra adicional para el diseño de textos.

«Decoración de texto» con características adicionales

Hasta ahora, el atributo “decoración de texto” solo le permitía definir cómo se debe subrayar o tachar un texto. Los valores posibles eran «subrayado», «sobrelineado» y «línea directa». Esto coincide con el formato típico tal como lo conocemos por el procesamiento de texto.

El hecho de que los diseñadores web hayan estado buscando soluciones alternativas para subrayar el texto en diferentes colores durante un tiempo muestra que estas opciones son insuficientes para el diseño web. A menudo, se ha asignado un marco («borde inferior») a un texto, en lugar de subrayarlo mediante «decoración de texto». Esto permitió al usuario influir en el color y el ancho del trazo.

Sin embargo, este enfoque tiene desventajas. El subrayado a través de «borde inferior» siempre está un poco más alejado del texto que el subrayado real.

Texto subrayado en un color diferente

Ahora, se han agregado varias características al atributo CSS «decoración de texto», lo que permite a los usuarios definir el color del subrayado independientemente del color del texto. Para eso, existe el nuevo atributo «text-decoration-color». Se permiten todos los colores CSS comunes, así como las entradas a través de “rgb ()” y “rgba ()”.

Definición de espacios en blanco para subrayados

Hay otro atributo nuevo: «text-decoration-skip». Le permite definir cuándo se debe interrumpir el subrayado. El valor «tinta» determina que los descendientes, como la «g» y la «j» minúsculas, se dejan fuera del subrayado.

Esta opción debería hacer felices a muchos diseñadores web. El tachado brutal de los descendientes por subrayados no es una vista agradable, especialmente para los diseñadores y desarrolladores web apasionados por la tipografía.

Texto subrayado, sin descendentes omitidos

El valor «espacios» asegura que los signos de puntuación y los espacios en blanco no estén subrayados. Esto le permite aplicar el subrayado solo a las palabras durante las enumeraciones.

Los elementos de bloque en línea, como las imágenes dentro de un texto, no están subrayados si el atributo tiene el valor «objetos». Además, el valor «bordes» define la distancia entre los subrayados de dos elementos de texto adyacentes.

Cambiar la posición del subrayado

También puede definir la posición del subrayado, a través de «text-underline-position». Normalmente, está al nivel de los descendentes. Sin embargo, el valor «debajo» asegura que la línea se muestre debajo de los descendientes.

Texto subrayado con el subrayado debajo de los descendientes

Esta ubicación tiene sentido cuando se muestran fórmulas matemáticas, por ejemplo. Esto evita que el subrayado cubra los números de subíndice, ya que los haría ilegibles.

Diferentes estilos de subrayado

Si una línea simple no es suficiente para usted, puede usar «estilo de decoración de texto» y elegir entre diferentes estilos para la visualización de las líneas. Mientras que el valor «sólido» dibuja la línea regular habitual, «doble» le da la opción de optar por un subrayado doble.

Subrayando con una línea ondulada

Para las líneas curvas, establezca el valor del atributo en «ondulado» y «punteado» para las líneas punteadas.

Etiquetado de subrayados mediante accesos directos

Como ya lo sabe por muchos otros atributos, también hay una versión corta para los nuevos atributos, que están marcados mediante el antiguo atributo «decoración de texto». El uso anterior de «text-decoration», que solo permitía subrayar y tachar, se ha pasado al atributo «text-decoration-line», pero todavía funciona como una forma corta.

Por lo tanto, el marcado «decoración de texto: subrayado» es la forma abreviada de «línea de decoración de texto: subrayado». También puede combinar los valores de «text-decoration-line», «text-decoration-style» y «text-decoration-color» en una versión corta: «text-decoration: underline wavy red».
En este ejemplo, se utiliza una línea curva como subrayado.

Soporte del navegador

El atributo «text-decoration-skip» es compatible con Chrome y Safari, aunque Chrome solo conoce los valores «ink» y «objects». Firefox también admite «text-decoration-color» y «text-decoration-style».

Actualmente, el atributo «text-decoration-position» solo es compatible con Chrome.

Otros navegadores seguramente seguirán su ejemplo pronto. Después de todo, los atributos tipográficos de CSS, así como el recorte de textos o su orientación hacia otros elementos, se han convertido en partes integrales del diseño web moderno.

#Subrayado #texto #ahora #con #diferentes #colores #más #efectos

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.