Índice

Aplicar sombreado al texto

La propiedad CSS text-shadow que permite aplicar un sombreado al texto, se define en el módulo CSS Text Decoration Module Level 3: http://www.w3.org/TR/css-text-decor-3/

text-shadow:

x y z color, donde

  • x es el margen de la sombra hacia la derecha.

  • y es el margen de la sombra hacia abajo.

  • z es la intensidad de degradado o de desenfocado (es opcional, con valor por defecto 0).

  • color es el color de la sombra.

Los parámetros x e y admiten valores negativos. El margen de la sombra se desplaza en este caso hacia la izquierda y hacia arriba.

He aquí el código HTML/CSS de este ejemplo:

<!DOCTYPE html> 
<html lang="es"> 
<head> 
    <title>Texto sombreado</title> 
    <meta charset="UTF-8" /> 
    <style> 
        .sombra-texto { 
               text-shadow: 4px 4px 2px #000; 
         } 
     </style> 
</head> 
<body> 
<h1>Pharetra augue. <span class="sombra-texto">Morbi leo risus porta 
ac consectetur ac</span>, vestibulum at eros.</h1> 
</body> 
</html>

El archivo correspondiente a este ejemplo se llama C16-text-shadow.html.

He aquí su visualización:

images/c16-001.PNG