Sombras en el texto: la propiedad text-shadow de CSS3
(Ninguna valoración todavía)
Cargando...Los efectos que se pueden conseguir sobre los textos aplicando "text-shadow" de CSS3 son simplemente impresionantes. Aquí les damos las bases para comenzar a trabajar con esta propiedad.
A pesar de que se trata de una propiedad que ya había sido introducida en CSS2, por problemas en la implementación fue dejada de lado en el estándar, la propiedad text-shadow ha sido introducida nuevamente en el estándar de CSS3. Esto quiere decir que su utilización hace que el código en el que se emplee no será válido.
Además de este percance, hay que resaltar que esta propiedad ya es reconocida y empleada en forma correcta por los navegadores Safari, Mozilla Firefox (a partir de la versión 3.5), Opera y Chrome. Es sorprendente que ante una propiedad que ofrece tantas oportunidades a los diseñadores, Microsoft ni siquiera lo tenga en los planes para su Internet Explorer 9. Esto seguramente obligará a los diseñadores a seguir empleando hojas de estilos alternativas para este tipo de navegadores.
La propiedad “text-shadow”
En principio, se trata simplemente del agregado de una sombra más o menos difuminada que sale del texto en distintos radios, según los valores que se agreguen a esta propiedad. Los valores que pueden agregarse son el color, la distancia de desplazamiento horizontal, la distancia de desplazamiento vertical y la distancia de dispersión o difuminado.
#sombra { text-shadow: #f00 1px 1px 2px;}
Como puede apreciarse en el código anterior, a la propiedad se le han agregado cuatro valores. El primero (no necesariamente tiene por qué ocupar esta posición, ya que puede agregarse al final, sin que esto altere el resultado) da el color de la sombra. En caso de que este valor no sea introducido, el color que asumirá la sombra será el mismo que el valor del color dado al texto.
El segundo y tercer valor marcan la distancia de desplazamiento horizontal y vertical respectivamente. En el ejemplo del código anterior, se han utilizado valores en pixeles, aunque esta propiedad también soporta valores otorgados en otras unidades de longitud soportadas por los navegadores. No pueden introducirse valores en porcentaje. El cuarto valor es la distancia de desenfoque, medida en cualquier unidad de longitud.
Una de las características más interesantes es la posibilidad de darle más de una sombra a un mismo texto, lo que como veremos en los ejemplos siguientes, pueden provocar atractivos efectos.
Algunos ejemplos de empleo de “text-shadow”
En primer lugar veremos cuatro ejemplos de aplicación simple de esta propiedad, para que pueda observarse el funcionamiento de los distintos valores que se le pueden otorgar. Los códigos empleados son los siguientes. Tengamos en cuenta que el código HTML que utilizaremos, será el mismo para todos los ejemplos que llevaremos adelante, por lo que en los siguientes, solo se harán modificaciones en el código CSS.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
<head>
<title>Sombras en texto</title>
<link rel="stylesheet" type="text/css" href="archivos/estilos.css" />
</head>
<body>
<div id="pagina">
<p id="uno">Texto de ejemplo para lawebera.es</p>
<p id="dos">Texto de ejemplo para lawebera.es</p>
<p id="tres">Texto de ejemplo para lawebera.es</p>
<p id="cuatro">Texto de ejemplo para lawebera.es</p>
</div>
</body>
</html>
html {
margin: 0;
padding: 0;
font: bold normal 30px Arial, Helvetica, sans-serif;
}
#pagina {
width: 600px;
margin: 0 auto;
background: #ddd;
}
p {
padding: 10px;
color: #ddd;
display: block;
margin: 0;
}
p#uno {
text-shadow: #666 -1px 1px 0px;
}
p#dos {
text-shadow: #666 2px 2px 0px;
}
p#tres {
text-shadow: #666 2px 2px 2px;
}
p#cuatro {
text-shadow: #666 0px 0px 5px;
}
El resultado de los cuatro párrafos que hemos colocado, puede verse en la siguiente imagen:
Como puede verse en la imagen y en el código, el texto y el fondo tienen el mismo color, por lo que solo será visible la sombra. En el párrafo uno, se ha aplicado una distancia de desplazamiento horizontal negativa de 1 pixel (lo que quiere decir que la sombra se desplazará hacia la izquierda), un desplazamiento vertical de un pixel, una distancia de desenfoque de 0 (o sea, sin desenfoque) y un color más oscuro que el fondo y el texto.
El párrafo dos muestra un aumento de las distancia horizontal y vertical (la horizontal ahora se ve hacia la derecha por tener valor positivo). El tercer párrafo tiene los mismos valores que en el segundo, excepto en el desenfoque, al que se le ha dado un desplazamiento de 2 pixeles. Finalmente, el cuarto párrafo tiene valores de desplazamiento horizontal y vertical igual a cero, mientras que el desenfoque se ha aumentado a 5 pixeles.
Ejemplos con varias sombras
p#uno {
text-shadow: #666 -1px 0px 0px, #666 1px 0px 0px, #666 0px 1px 0px, #666 0px -1px 0px;
}
p#dos {
text-shadow: #f00 -1px 0px 0px, #00f 1px 0px 0px, #f00 0px 1px 0px, #00f 0px -1px 0px;
}
p#tres {
text-shadow: #00f -2px 1px 0px, #f00 2px -1px 0px;
}
p#cuatro {
text-shadow: #00f -2px 2px 4px, #f00 2px -2px 4px;
}
Con la aplicación del código anterior, obtendremos los siguientes resultados:
En el primer párrafo, se han colocado las cuatro sombras (en el código pueden ver que se colocan los cuatro valores separados por una coma), cada una con un desplazamiento marcado (horizontal o vertical) positivo y negativo de un pixel y sin desplazamiento de desenfoque. El resultado, es que se ha generado un borde que rodea al texto.
En el segundo párrafo, se han repetido los desplazamientos anteriores, pero sustituyendo los colores. En el tercero, se han colocado solo dos sombras con desplazamientos verticales y horizontales opuestos y de diferentes dimensiones. Finalmente, en el cuarto, se han puesto desplazamientos verticales y horizontales opuestos con un desenfoque de cuatro pixeles y de colores diferentes.
A continuación, veremos algunos otros ejemplos de efectos conseguidos con la aplicación de varias sombras:
p#uno {
text-shadow: #444 -1px -1px 0px, #fff 1px 1px 0px;
}
p#dos {
text-shadow: #fff -1px -1px 0px, #444 1px 1px 0px;
}
p#tres {
text-shadow: #00f -2px 2px 4px, #f60 -4px 4px 8px;
}
p#cuatro {
text-shadow: #00f -3px 3px 0px, #f00 3px -3px 0px;
}
p#uno {
text-shadow: #000 0px 0px 30px;
}
p#dos {
text-shadow: #fff -2px 2px 1px, #888 2px 2px 1px;
}
p#tres {
text-shadow: #fff -2px 0px 3px, #aaa 0px -2px 3px, #ccc 0px 2px 3px, #777 2px 0px 3px;
}
p#cuatro {
text-shadow: #888 4px -4px 2px;
color: #fa8;
}
Conclusión
A medida que las diferentes propiedades de CSS3 comiencen a ser implementadas por todos los navegadores, los diseñadores de páginas web podrán ganar en libertad y comenzar a prescindir de imágenes y scripts para conseguir algunos efectos, haciendo que las páginas logren cargas más rápidas y manteniendo los mismos efectos de los diseños.
“Text-shadow” ya se implementa en muchas páginas, pero lamentablemente se debe recurrir al texto simple o a las imágenes con una hoja de estilos separada para los visitantes que utilizan Internet Explorer.
Una respuesta
El orden de los atributos sería:
horizontal-offset | vertical-offset | blur-radius | color
Y aquí una pequeña herramienta para probar: http://www.01241.com/01/text-shadow-tool.html