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:
- Usando la propiedad
text-shadow
de CSS 3, de momento sólo soportada por Safari y Konqueror (gracias Xir por la corrección)
- Utilizando la pseudo-clase
:before
antes del texto para duplicarlo y simular una sombra, cosa que no funcionaría en MSIE
- 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/page/2/css/dropShadows.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/2006/07/page/2/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/