10.05.2005

Disenamos.com

Enhorabuena! (siempre quise decir esa palabra!) Sosa junto los primeros articulos para lanzar Disenamos.com, como dice en el mail que me envio:

Hola

Le invito a visitar Diseñamos (http://www.disenamos.com) una nueva revista online dedicada a todos los profesionales del web.
Si les gusta y quieren enlazarnos, todo apoyo será bienvenido. Si quieren colaborar... mejor aun :D.

Excelente el diseño de la ALA latina :).

11:58 Anotado en Web semántica | Permalink | Comentarios (4) | Enviar a Email

16.04.2005

Usar background-image para reemplazar texto

Si, si, llegué tardisimo a esta tecnica, pero no deja de sorprenderme lo simple y eficaz que es!

La técnica

Estoy leyendo "The Zen of CSS design" y uno de los puntos mas importantes del CSS Zen garden es justamente la capacidad de reeemplazar un texto en HTML por una imagen, y esto se logra de la siguiente manera:

<h1><span>Título a ser reemplazado</span></h1>

Hasta ahi no hay nada raro, solo un h1 cuyo contenido está encerrado en un span. Ahora bien si le agregamos el siguiente estilo:

h1 {
background: #ccc url(image.png);
width: 100px;
height: 50px;
}

h1 span {
display: none;
}

Entonces ahora esta todo mas claro :). A lo que esta contenido dentro del span del h1, le digo que desaparezca (display:none;) y al h1 le doy la ruta y tamaño de la imágen que quiero :D.

Ventajas

Es accesible!, pensemos que al desactivar los estilos, se va a ver el h1 con el texto incluido, ahora, si existe un problema...

Desventajas

¿Qué pasa si desactivo la carga de imágenes? Bueno, he aqui un grave problema :S. El texto no va a parecer porque estamos renderizando con nuestro CSS, y la imagen tampoco se va a ver porque le dijimos al browser que no la descargue ... Como se extraña el atributo alt en el CSS!

A priori y hasta que se me ocurra algo mejor, decidí incluir en el CSS, además del a imagen de fondo, un color para que el usuario al menos vea que hay algo. No es bueno ni mucho menos esta solución, pero en mi caso va a ser efectiva.

Acerca del inventor de esto

Como dije al principio es una técnica que esta en "The Zen of CSS design", pero el verdadero creador es Stop Design. Por mi parte me decidí a postear esto porque la vez que necesite de algo similar inventé otra cosa que también tenia una falencia (no se veía la imagen si se desactivaba el CSS, pero si tenia un alt) nadie me sugirió esto, asi que creo que no es tan famoso por estas latitudes.

14:40 Anotado en Web semántica | Permalink | Comentarios (12) | Enviar a Email