7.1 Propiedad text-decoration
CSS ofrece varias propiedades para estilizar y decorar texto en páginas web. Las propiedades text-decoration,
text-transform y text-shadow permiten añadir subrayado, transformar el caso del texto y crear sombras, lo que ayuda
a hacer el texto más expresivo y atractivo.
La propiedad text-decoration controla los efectos decorativos del texto, tales como subrayado, superlínea y
tachado. También permite establecer el color y estilo de las líneas utilizadas para decorar el texto.
Valores:
none: elimina todas las decoraciones de textounderline: subraya el textooverline: añade una línea sobre el textoline-through: añade una línea a través del texto (tachado)blink: el texto parpadea (no compatible con todos los navegadores)text-decoration-color: establece el color de la línea de decoracióntext-decoration-style: establece el estilo de la línea (solid, double, dotted, dashed, wavy)text-decoration-thickness: establece el grosor de la línea de decoración
Ejemplo de uso:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.custom-decoration {
text-decoration: underline wavy red;
}
<body>
<p class="underline">Este texto está subrayado.</p>
<p class="overline">Este texto está sobrelineado.</p>
<p class="line-through">Este texto está tachado.</p>
<p class="custom-decoration">Este texto está subrayado con una línea roja ondulada.</p>
</body>
7. 2 Propiedad text-transform
La propiedad text-transform controla la transformación del texto, cambiando el caso de las letras. Esto es útil
para cambiar automáticamente el texto a mayúsculas, minúsculas, etc.
Valores:
none: sin transformación (valor por defecto)capitalize: la primera letra de cada palabra se convierte en mayúsculauppercase: todas las letras se convierten en mayúsculaslowercase: todas las letras se convierten en minúsculasfull-width: convierte el texto a tamaño completo (doble) (no compatible con todos los navegadores)
Ejemplo de uso:
.capitalize {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
<body>
<p class="capitalize">este texto será con la primera letra de cada palabra en mayúscula.</p>
<p class="uppercase">este texto será completamente en mayúsculas.</p>
<p class="lowercase">ESTE TEXTO SERÁ COMPLETAMENTE EN MINÚSCULAS.</p>
</body>
7.3 Propiedad text-shadow
La propiedad text-shadow añade una sombra al texto, lo que permite crear efectos visuales
y mejorar la legibilidad del texto en la página web.
Valores:
<offset-x>: desplazamiento de la sombra en el eje X (horizontal)<offset-y>: desplazamiento de la sombra en el eje Y (vertical)<blur-radius>: radio de desenfoque de la sombra (opcional)<color>: color de la sombra (opcional)
Ejemplo de uso:
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.multiple-shadows {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);
}
<body>
<p class="text-shadow">Este texto tiene sombra.</p>
<p class="multiple-shadows">Este texto tiene múltiples sombras.</p>
</body>
Explicación del código:
text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);: añade una sombra con desplazamiento horizontal de 2px, desplazamiento vertical de 3px, radio de desenfoque de 4px y color negro semitransparentetext-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);: añade dos sombras con diferentes parámetros, creando un efecto visual más complejo
GO TO FULL VERSION