JMiur [E]

A algunos les ha causado sorpresa que exista una propiedad CSS que permite colocar sombras en un texto y me han mandado una página de Design Mem para que pudiera explicar la forma de utilizarla.

La propiedad se llama text-shadow pero, aunque está definda y aceptada por la W3C, sólo está implementada en los navegadores Safari ... no sólo Internet Explorer no respeta los estándares.

Para crear este efecto en otros navegadores, debemos recurrir a trucos.

Por ejemplo, si somos de esos pocos que usan Safari, usando esta propiedad, un texto se vería así:

This is white text, on a white background. Yet in Safari, you can read this, because of the black text-shadow.

Como probablemente no lo estemos usando ya que no está muy difundido, esto es lo que veríamos:


En la página de referencia nos muestran una forma de simular este este efecto en Firefox usando un poco de CSS:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


Para agregar el efecto, vamos a duplicar el texto y usar el atributo TITLE. Como mostraremos dos textos, uno de ellos lo desplazaremos levemente usando la etiqueta SPAN:
<p class="shadow" title="... el texto ...">
<span>... el texto ...</span>
</p>
Todo se limita a crear una clase CSS llamada shadow que tendrá estas propiedades:
<style>.shadow  {
color:#FFFFFF;
display: block;
position: relative;
}

.shadow span {
display: block;
position: absolute;
top: 0px;
}

.shadow:before {
display: block;
color: #222222;
content: attr(title);
padding: 1px;
} 
</style>
Un poco raro ¿verdad? y encima, en Internet Explorer no funciona.

Tal vez sea mejor pensar de otra forma y no complicar las cosas. Es cierto que, para crear un texto con sombras, lo mejor es colocar ese texto repetido y desplazar uno de ellos pero, es más sencillo hacerlo utilizando propiedades "normales" y de tal manera, lograr que funcione en cualquier navegador.

Un texto con sombrasUn texto con sombras


Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
color: #FFFFFF;
font-family: Verdana; font-size: 50px;

Propiedades de la etiqueta SPAN
position: absolute; left: 1px; top: 1px;
color: #000000;
font-family: Verdana; font-size: 50px;


Este tipo de técnica la podemos directamente en un texto específico agregando las propiedades en el atributo STYLE:
<div style="position: relative; top: 0px; left: 0px; ... ">
... el texto ...
<span style="position: absolute; top: 1px; left: 1px; ... ">
... el texto ...
</span>
</div>

Un texto con sombrasUn texto con sombras


Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
font-family: Verdana; font-size: 50px;
padding: 5px;
color: #000000;
background-color: #FFFFFF;

Propiedades de la etiqueta SPAN
position: absolute; left: 2px; top: 2px;
font-family: Verdana; font-size: 50px;
color: #FFFFFF;

Las variaciones las logramos probando y probando y volviendo a probar. Cambiando las coordenadas de los desplazamientos (left y top) o lo colores del los textos (color):

Un texto con sombrasUn texto con sombras


Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
font-family: Verdana; font-size: 50px;
color: rgb(255, 153, 51);

Propiedades de la etiqueta SPAN
position: absolute; left: 1px; top: -2px;
font-family: Verdana; font-size: 50px;
color: rgb(153, 51, 0);

O superponiendo textos que tengan diferentes tamaños (font-size):

Un texto con sombrasUn texto con sombras


Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
font-family: Verdana; font-size: 51px;
color: CornflowerBlue;

Propiedades de la etiqueta SPAN
position: absolute; left: 0px; top: 7px;
font-family: Verdana; font-size: 50px;
color: Bisque;

Todo funciona porque la etiqueta DIV tiene la propiedad position: relative y la etiqueta SPAN la propiedad position: absolute de tal manera que podemos controlar la posición de salida de los textos usando left y top; si en ambas etiquetas los valores son cero, los textos se superponen y el que "se ve" es el contenido en la etiqueta SPAN que queda "encima" del otro:

Un texto con sombrasUn texto con sombras


Propiedades de la etiqueta DIV
position: relative; left: 0px; top: 0px;
font-family: Verdana; font-size: 50px;
color: Blue;

Propiedades de la etiqueta SPAN
position: absolute; left: 0px; top: 6px;
font-family: Verdana; font-size: 50px;
color: CadetBlue;

Por cierto, en el Blog de Gem@ hay un artículo donde se habla de una técnica similar con la particularidad de utilizar etiquetas diferentes para los textos superpuestos:

Un texto con sombras
Un texto con sombras

Por último, en ese mismo post, La Bloguería comenta la posibilidad de utilizar un texto y un subtexto diferente.

USANDO SOMBRASUn texto con sombras

8 comentarios:

Anónimo  

Bastante interesante. No se me había ocurrido probar de esa manera.
Gracias por el dato.

Responder
KnxDT  

Excelente truco, div's y span's. La verdad es que hacía unas semanas que no pasaba por aqui, un saludo JMiur, buen truco.

Responder
Gem@  

Sencillamente genial ¿Hay más formas de decorar los textos aparte de sombras? me gusta este tema ;)

Responder
JMiur  

Es un método sencillo y como sólo se basa en mostrar dos cosas levemente superpuestas, las posibilidades son muchas aunque hay que probar una por una, usar negrita, itálica, opacidades.

Responder
La Blogueria  

Sí, da mucho juego; ¡y es la alternativa perfecta a cualquier otro método para conseguir sombras!

Responder
N13  

muchas gracias por el post, en todos lados hablan de como se hace pero nadie dice en que funciona y en que no.
Saludos

Responder
N13  

Gracias por el post, el único en la web que aclara para que funciona y para que no.

Responder
_RosarioZapien_  

Gracias...Exelente post Cuando Tengo Tiempo lo Pondre APrueba Tienes UN visitante Mas!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR