juantomas Hacking the planet

Durante el proceso de implementación del nuevo diseño y usabilidad del proyecto bazar nos hemos encontrado con un pequeño problema que nos estaba volviendo locos: Como hacer transparentes los divs pero no su contenido.

Después de googlear mucho, hemos encontrado todo tipo de soluciones pero todas con limitaciones y muchos parches para que funcione bien en todos los navegadores. Ya sabéis la pesadilla de las versiones antiguas y sobre todo de Internet Explorer.

El nuevo diseño que ha realizado Javier Cañada de Vostok Studio está basado en objetos que usan transparencia contra el fondo para remarcarse.  Esto simplifica mucho la creación de nuevos temas con solo modificar el color de fondo en el css. Sin embargo CSS3 cuando modificas la transparencia de un div todos los elementos que la contienen lo heredan y no hemos encontrado una manera sencilla y limpia de evitarlo.

Hasta que encontramos transify. Transify es un pequeño jquery que permite hacer todo esto y algunas cosas más de forma elegante y sencilla.

Solo hay que incluir este plugin de jquery y cuando el documento está cargado decirle que div queremos que sean transparentes pero no su contenido. En nuestro caso este es el código que utilizamos:

<script type=»text/javascript»>
$(document).ready(function() {
$(‘.transpa’).transify({opacityOrig:.35});
$(‘.ilumina’).transify({opacityOrig:.35,opacityNew:.7,fadeSpeed:200});
});

Todos los div marcados con la clase transpa se convierten en transparentes con un grado de opacidad del 35%. Como habitualmente el color de fondo de estos div es negro, lo que hace es oscurecer el color de fondo.

Además hemos creado otra clase que ilumina para los div que queremos que se iluminen cuando el cursor pasa por encima para incrementar la usabilidad y llamar la atención de los usuarios.