CSS text-shadow atributo
- página anterior text-overflow
- página siguiente text-transform
Definición y uso
La propiedad text-shadow establece una sombra en el texto.
Véase también:
Tutorial de CSS3:CSS3 efectos de texto
Manual de referencia del DOM HTML:Propiedad textShadow
Ejemplo
Efecto básico de sombra de texto:
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Hay más ejemplos en la parte inferior de la página.
Sintaxis de CSS
text-shadow: h-shadow v-shadow blur color;
Notas:La propiedad text-shadow agrega una o más sombras al texto. Esta propiedad es una lista de sombras separadas por comas, cada sombra tiene dos o tres valores de longitud y una valor de color opcional para definir. Los valores omitidos son 0.
Valor del atributo
| Valor | Descripción | Pruebas |
|---|---|---|
| h-shadow | Obligatorio. Posición horizontal de la sombra. Permite valores negativos. | Pruebas |
| v-shadow | Obligatorio. Posición vertical de la sombra. Permite valores negativos. | Pruebas |
| blur | Opcional. Distancia de desvanecimiento. | Pruebas |
| color | Opcional. Color de la sombra. Ver Valores de color CSS. | Pruebas |
Detalles técnicos
| Valor predeterminado: | ninguna |
|---|---|
| Herencia: | sí |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | object.style.textShadow="2px 2px #ff0000" |
Más ejemplos
- Sombra de texto con efecto borroso
- Este ejemplo muestra la sombra de texto con efecto borroso.
- Sombra de texto sobre texto blanco
- Este ejemplo muestra el texto con sombra de texto sobre texto blanco.
- Sombra de texto con efecto neón
- Este ejemplo muestra el texto con sombra de texto con efecto neón.
Compatibilidad del navegador
Los números en la tabla indican la primera versión del navegador que admite completamente esta propiedad.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
- página anterior text-overflow
- página siguiente text-transform
