Hace unas semanas necesitaba crear un modo cine (oscurecer toda la pantalla salvo un elemento -típicamente un vídeo-) para un proyecto que me encargaron. Buscando un poco, descubrí que era mucho más fácil de lo que pensaba: sólo hacen falta un par de líneas de HTML, CSS y JavaScript.

Efecto a conseguir

Púlsame para activar el modo cine

Nota: ¡Me encanta ese perro! 😀

Cómo se consigue

El efecto se consigue creando un elemento con HTML, aplicándole CSS para que ocupe toda la pantalla y se sitúe encima de todos los elementos salvo el vídeo o elemento al que queramos dar importancia:

<div id="overlay" style="position: fixed; top: 0; left: 0; background: black; display: none; z-index: 999; width: 100%; height: 100%;"></div>

Fíjate en cómo se le pone display:none para que no es muestre originalmente. Para este efecto tiene vital importancia la propiedad z-index, que establece la posición de un elemento en el eje z: en otras palabras, la profundidad a la que se sitúa. La vista 3D de Firefox es muy útil para visualizar esto.

El valor de z-index puede ser el que quieras. El único requisito es que tiene que ser mayor que el de cualquier otro elemento de la página, excepto el del vídeo:

 <div id="video" style="position: relative; z-index: 1001;">http://www.youtube.com/watch?v=4PcL6-mjRNk</div>

El valor de z-index para el vídeo es de 1001 -mayor que 999- y, por tanto, se mostrará por encima del overlay.

Una vez establecidos los elementos, lo único que nos queda es activarlos/desactivarlos. Para eso usaremos JavaScript (en mi caso jQuery, pero se puede conseguir lo mismo con JS simple):

 <script type="text/javascript">
    $('#activate').click(function(e){ 
        e.preventDefault(); 
        $('#overlay').toggle().click(function(){
            $(this).hide(); 
        }); });
</script>

Traducido, este código dice:

1. Cuando alguien haga click en el elemento #activate, evita que el enlace lleve a su destino.
2. Cambia la visibilidad del elemento #overlay (si no está visible, hazlo visible; y viceversa)
3. Haz que cuando alguien haga click en #overlay, éste se oculte.

Conclusión

Un efecto muy vistoso y muy fácil de conseguir. Si queremos mejorarlo, se pueden poner transparencias, algún efecto o transición, etc. Eso ya depende de la creatividad de cada uno 🙂

Tutorial original: http://bloggersbazaar.blogspot.com.es/2012/05/add-cinema-mode-to-your-blog.html