7.1 Propiedad text-shadow
La propiedad text-shadow en CSS permite agregar sombras al texto, creando un efecto de volumen y mejorando la percepción visual. Esta propiedad ofrece flexibilidad en la configuración de sombras, incluyendo el control del desplazamiento, desenfoque y color de la sombra.
La propiedad text-shadow establece una sombra para el texto dentro de un elemento. Permite controlar la posición, el desenfoque y el color de la sombra, añadiendo un acento visual a los elementos de texto.
Sintaxis:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
Parámetros:
offset-x: desplazamiento de la sombra en horizontaloffset-y: desplazamiento de la sombra en verticalblur-radius: radio de desenfoque de la sombra (opcional)color: color de la sombra (opcional)
Valores:
offset-xyoffset-y: establecen el desplazamiento de la sombra respecto al texto. Pueden ser valores positivos o negativos.blur-radius: determina el grado de desenfoque de la sombra. Cuanto mayor sea el valor, más borrosa será la sombra. Valor por defecto es 0 (sin desenfoque).color: establece el color de la sombra. Si no se especifica el color, se usa el color del texto.
Ejemplo de uso:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">Sombra básica</p>
<p class="shadow-blur">Sombra con desenfoque</p>
<p class="shadow-color">Sombra con color</p>
<p class="shadow-multiple">Múltiples sombras</p>
</body>
Explicación del código:
.shadow-basic: aplica una sombra simple con un desplazamiento de2pxtanto horizontal como vertical, un radio de desenfoque de2pxy un color negro semitransparente..shadow-blur: añade un mayor grado de desenfoque (5px), creando una sombra más borrosa..shadow-color: aplica una sombra con color (rojo)..shadow-multiple: aplica dos sombras con diferentes desplazamientos y desenfoques, creando un efecto de capas complejo.
7.2 Ejemplos
1. Sombra suave
Sombra suave con un gran radio de desenfoque:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">Sombra suave del texto</p>
</body>
Explicación del código:
.soft-shadow: aplica una sombra suave sin desplazamiento y con un gran radio de desenfoque (10px), creando un ligero efecto de resplandor alrededor del texto.
2. Sombra brillante
Sombra con un color brillante y poco desenfoque:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">Sombra con color brillante</p>
</body>
Explicación del código:
.colorful-shadow: aplica una sombra con color brillante (azul), desplazamiento de3pxy radio de desenfoque de5px.
3. Múltiples sombras
Múltiples sombras con diferentes parámetros:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">Múltiples sombras del texto</p>
</body>
Explicación del código:
.multi-shadow: aplica dos sombras con diferentes parámetros: una con pequeño desplazamiento y desenfoque, y otra con mayor desplazamiento y desenfoque de color rojo.
7.3 Puntos importantes
Puntos importantes al usar text-shadow
Compatibilidad de navegadores
La propiedad text-shadow es compatible con todos los navegadores modernos, incluyendo Google Chrome, Firefox, Safari, Edge y Opera. Sin embargo, es importante verificar la visualización de sombras en versiones anteriores de navegadores para asegurar la compatibilidad entre diferentes navegadores.
Rendimiento
El uso de sombras complejas con muchas correcciones de desplazamiento y desenfoque puede afectar el rendimiento, especialmente en dispositivos móviles. Optimiza las sombras para un mejor rendimiento y prueba en varios dispositivos.
Accesibilidad
Asegúrate de que las sombras no dificulten la legibilidad del texto. El contraste entre el texto y el fondo debe ser suficiente para todos los usuarios, incluyendo personas con discapacidades visuales.
La propiedad text-shadow proporciona herramientas sólidas para crear sombras de texto en CSS. Permite agregar varios efectos, desde sombras simples hasta sombras complejas en capas con diferentes colores y desenfoques.
Usar text-shadow ayuda a mejorar la percepción visual del texto, añadiendo profundidad y volumen al diseño de las páginas web. Es importante tener en cuenta la compatibilidad de navegadores y el rendimiento al aplicar sombras complejas, así como la accesibilidad para todos los usuarios.
GO TO FULL VERSION