Sombras de texto (text-shadow)
Bordes redondeados (border-radius) Bordes redondeados en los vértices Sombras (box-shadow) Sombras múltiples (box-shadow) Sombras interiores Sombras con transparencias Sombras de texto Rotación Punto de origen Escalado Translación Torcer (transform:skew) Múltiples transformaciones en forma simultanea Opacidad (opacity) Opacidad (color) Múltiples columnas (column-count) Múltiples columnas dinámicas (column-width) Múltiples columnas y su separación (column-gap) Múltiples columnas y línea separadora (column-rule) Importar una fuente no disponible en el navegador (@font-face) Imágenes de fondo (background-image) Imágenes de fondo en diferentes posiciones (background-position) Imágenes de fondo (background-size) Imágenes de fondo (background-origin) Transiciones de una propiedad (transition) Transiciones de múltiples propiedades (transition) Transiciones (funciones de transición) Transiciones (tiempo de demora en iniciar la transición) Transiciones (otra sintaxis para hacer lo mismo) Animaciones (sintaxis básica) Animaciones (animation-iteration-count y animation-direction) Animaciones (animation-timing-function y animation-delay) Animaciones (animation-play-state) Animaciones (definición de más de 2 keyframes)

Sombras de texto (text-shadow)

La propiedad text-shadow agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad text-decorations del elemento, cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.

La propiedad text-shadow agrega sombra al texto, esta propiedad acepta una lista de sombras separadas por comas que se aplicarán al texto.

text-shadow: h-shadow v-shadow blur-radius color none

Valores de propiedad

  • h-shadow  La posición de la sombra horizontal. Se permiten valores negativos es un valor obligarorio
  • v-shadow  La posición de la sombra vertical. Se permiten valores negativos es un valor obligarorio
  • blur-radius El radio de desenfoque. El valor predeterminado es 0 es un valor opcional
  • color El color de la sombra. Mire los valores de color de CSS para obtener una lista completa de posibles valores de color es un valor opcional
  • none Valor por defecto. Sin sombra

Nota: Internet Explorer 9 y versiones anteriores no admiten la propiedad text-shadow.

Ejemplos

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow en un texto blanco</h1>
</body>
</html>

El código anterior mostrará

Text-shadow en un texto blanco

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   text-shadow: 0 0 3px #FF0000;;
}
</style>
</head>
<body>
<h1>Text-shadow con brillo de neón rojo</h1>
<p><b>

El código anterior mostrará

Text-shadow con brillo de neón rojo

<!DOCTYPE html>
<html>
<head>
<style>
     text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
</style>
</head>
<body>
<h1>Text-shadow con brillo de neón rojo y azul</h1>
<p><b>

El código anterior mostrará

Text-shadow con brillo de neón rojo

Esta propiedad aplica para los pseudo-elementos ::first-line y ::first-letter.

Es importante tener en cuenta que esta propiedad no la soporta el Internet Explorer 9.