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="css/dropShadows.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="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/

Los tooltips son esos mensajes emergentes que surgen para añadir más información, generalmente, a un enlace o una imagen. Los tooltips en html suelen generarse por medio del atributo “title” y, en el caso de las imágenes, erroneamente, con el atributo “alt” que, a pesar de presentarse como un tooltip en muchos navegadores, es un reemplazo de texto para las mismas. Para más información podéis ojear The Alt and Title Attributes en 456 Berea Street y la referencia al atributo alt en las faq para desarrolladores de Mozilla.

La falta de consistencia en la representación de estos mensajes por parte de los navegadores provoca usos incorrectos que, si bien pueden servirnos en algunos casos, producen un empeoramiento de la funcionalidad para usuarios no-visuales.
Además, en ocasiones puede resultarnos útil añadir este tipo de mensajes emergentes a elementos que no sean enlaces o imágenes, incluso puede que necesitemos que esta información aparezca en pantalla asociada a gestos diferentes del de pasar el ratón por encima o, incluso, con un estilo definido por nosotros mismos.

Para todos estos usos, puede solucionarnos la papeleta el uso de un poco de Javascript. He estado mirando un poco y he encontrado unos cuantos scripts.
(más…)

Me encanta el efecto que se consigue usando Lightbox, ya sabéis al dar click en una imágen se oscurece toda la página y surge la imagen ampliada en primer plano…
Queda realmente bien pero el script es un poquito grande y pesa bastante.

Si a ti también te parece que pesa demasiado quizá quieras probar Litebox, se trata de una versión adelgazada de Lightbox, con el mismo resultado en mucho menos peso. ¿Y cómo se obra el milagro? Simple, en lugar de utilizar la libreria Script.aculo.us se utiliza la infinitamente más ligera moo.fx y en lugar de usar la version completa de Prototype se utiliza la versión lite.

Enlaces:

Litebox
Lightbox
Script.aculo.us
Prototype
Moo.fx

Via Download Squad