Cómo crear transparencias opacas con CSS (y añadirles efectos con Javascript)


Recientemente he tenido que hacer un pequeño proyecto con XHTML y CSS (y algo de Javascript), en el que me he topado de bruces con varios problemas, uno de los cuales era este: "Un menú horizontal de tres fotos en miniatura que estén oscurecidas por defecto y que al pasar sobre ellas se aclaren".

Evidentemente Flash no voy a utilizar para esto, por tratarse de una tecnología privativa y no accesible. Como muchos sabréis existen una serie de propiedades en CSS para cambiar la opacidad de una imagen, básicamente para los navegadores mas utilizados. Con "-moz-opacity:0.7", siendo 0.7 un número decimal entre 0 y 1 en notación anglosajona para navegadores Mozilla y derivados, y/o "filter:alpha(opacity=40)", siendo 40 un número entero entre 0 y 100, para IE de Microsoft, creamos una trasparencia "aclarando" la capa que estemos editando, pero ¿cómo oscurecemos una capa?.

Burdos intentos al estilo "-moz-opacity:1.5" no sirven de nada, y no dejan de ser eso, "burdos".
Tras darle un par de vueltas se me ocurre lo siguiente:
Para el XHTML
div class='contenedor'
p class='color' /p
/div
Para el CSS
div.contenedor {background: url('imgs/prueba.png') no-repeat;} p.color {margin:0; background-color:\#000; -moz-opacity:0.3; height:50px; width: 30px;} Este trozo de código genera un DIV con una imagen como fondo de la capa y un párrafo en su interior con la altura y anchura de la imagen de fondo del DIV, con una capa negra pero con opacidad 0.3. ¡Objetivo conseguido! Para hacer un menú horizontal, basta con añadir "float" a las capas "contenedor" y luego recolocar todo eso.

¿Qué pasa si queremos hacer que al pasar con el ratón por encima de la imagen esta se aclare?. Pues con un poquito de Javascript podemos hacerlo sin ningún problema, con los eventos "onmouseover" y "onmouseout" y cambiando la propiedad "-moz-opacity" desde una nueva clase en CSS. Pero eso se lo dejo al lector como prueba.
Salud.

[] enlace permanente