Como simular opacacidad de inspección con CSS3?

[WHK]

Hola, estaba creando un sitio WEB y me gustaría crear algo muy similar a lo que hace firefox 10 al momento de inspeccionar un código, o sea que se oscuresca toda la web menos ciertas divisiones.

Quise hacerlo con css y opacacity:

Código (css) [Seleccionar] Expandir

html{ opacacity: 0.5; }
.marked{ opacacity: 1 !important; border: 1px dashed red; }
Pero no resulta ya que en ves de aclararse la división se pone de color blanco simplemente.

También intenté crear el efecto atraves de imágenes png semi transparentes pero fue lo mismo, no puedo clarar algo que está por debajo de png.

Igual podría usar 4 divisiones que bordeen la división clara con transparencias, pero que sucedería si tengo 100 divisiones que aclarar?

Alguien tiene alguna idea de como poder hacer esto?
[youtube=425,350]http://www.youtube.com/watch?v=95yfAfx1hI0[/youtube]

Quiero hacer esto mismo pero con css. Será posible?

[WHK]

Hasta ahora lo solucioné en parte pero no de la mejor forma.

Puse una división con estilo position: fixed width y height al 100%, top y left a 0px y background-color: black con opacity: 0.7;
Lo extraño fue que toda la web se puso oscura menos las divisiones con position relative, aunque de todas formas comenzé a jugar con los z-index, le puse 1 a la división oscura y 2 a las que quiero mostrar, pero igual la tube que poner antes de todas las divisiones que quiero mostrar, el problema es que no se aplicarán para las divisiones que están antes y si la pongo antes la oculta las texturas.

En pocas palabras funciona pero si quiero modificar algo o hacer aparecer otra división en otro lado estoy jodido.

Habrá otra opción mejor?

[raul338]

Vos queres hacer algo al mas estilo Turn Off The Lights?

Se me ocurre con un div que ocupe toda la ventana, y a lo que quieras resaltar, duplicarlo o sacarlo y hacerlo hijo del div con posicion absoluta/relativa, aunque claro, ni idea de como hacerlo

[EFEX]

A puro css ni idea, es de usarse jquery( por ejemplo )

[WHK]

Gracias, lo de raul es una extensión para exploradores, no es algo que puedas hacer a puro css/html/javascript

Lo de EFEX es lo mismo que hize yo, poner una división del porte de la página y lo que se ve claro es un div con position relative con un z-index elevado, de hecho no es necesario poner el z-index y en ves de absolute deberia tener un fixed en caso de que html{} tenga margenes o padding.

El problema de eso es que tengo otras divisiones que ya tienen position relative con z-index modificado y si quiero hacerlos aparecer tendría que modificar el z-index de esa división y se jodería.

Bueno ahi veo que hago, gracias de todas formas.

[raul338]

Asi es WHK, pero lo que hace esa extension usar parte de javascript/html/css para actuar, deberias ver eso (aunque no se ni donde )