Webmaster Libre

Generalmente vivimos muy bien sin dar sombra a nuestros textos, a la espera de que más navegadores acepten la propiedad text-shadow de CSS 3, no obstante muchas veces nos resultaría realmente útil poder usarla con resultados uniformes en todos los navegadores.

Hasta ahora teníamos tres aproximaciones al tema, que cuando funcionaban en un navegador fallaban en otro e incluso haciendo uso de una combinación de las tres los resultados eran muy diferentes en los diversos navegadores:

1. Usando la propiedad text-shadow de CSS 3, de momento sólo soportada por Safari y Konqueror (gracias Xir por la corrección)
2. Utilizando la pseudo-clase :before antes del texto para duplicarlo y simular una sombra, cosa que no funcionaría en MSIE
3. Usando un filtro propietario para MSIE

Scott Jehl nos ofrece un script en Javascript, no obstrusivo, que nos permite de forma sencilla conseguir este efecto de forma homogénea en todos los navegadores que tengan soporte para Javascript.

Para utilizarlo simplemente se carga el script

<link href="/2006/07/25/texto-con-sombra-compatible-con-todos-los-navegadores/css/dropShadows.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/2006/07/25/texto-con-sombra-compatible-con-todos-los-navegadores/scripts/dropShadows.js"></script>

y se añade la clase highContrast (recuerda, respeta las mayúsculas y las minúsculas)

<h2 class="highContrast">Here's an example</h2>

La apariencia de la sombra puede editarse en el archivo dropshadow.css

Descarga Javascript:
http://www.scottjehl.com/jsDropShadows/scripts/dropShadows.js
Descarga CSS:
http://www.scottjehl.com/jsDropShadows/css/dropShadows.css

En el blog de Scott tenéis más información sobre el funcionamiento del script.

Enlace: http://www.scottjehl.com/jsDropShadows/