soy Kseso y esto EsCSS

Esto es todo, amigos. Un lightbox de dibujos animados puro Css

Esto es todo, amigos. Un lightbox de dibujos animados puro Css

·Por Kseso ✎ 9

Vamos con un sencillo "lightbox" realizado en puro Css utilizando la pseudoclase :checked. En esta ocasión la demo parte de una premisa: simplificar el código. La particularidad esta vez está en que el número de selectores css es independiente de los "cromos" que haya en el html.

Para hacerlo posible antes hay que imaginar y pensar la estructura del html de tal manera que lo favorezca. Al hacerlo así, podremos prescindir de tener tantos selectores con su #id como "tarjetas" a mostrar como ocurre en alguna demo basada en el uso de 'checked' publicada en el blog.

Al hecerlo de esa manera podremos aumentar el contenido del html sin necesidad de tener que retocar los estilos.

Para los impacientes ;-) que quieran ir a ver la demo diréctamente:

¡líbrame de todo el rollo!

Esquema Html de bloques

Para ayudar a comprender las explicaciones la imagen siguiente ayudará. En ella ves los dos estados de cada cromo (articles). A la izquierda en su estado 'normal' y a la derecha al mostrarse en el lightbox.

Lightbox puro Css
Los dos estados de los articles

Fíjate en la desplegada en el lightbox, básicamente consiste, además del avatar redondo, en una caja a la izquierda con la info textual sobre cada personaje con una lista de iconos en la parte inferior y otra caja a la derecha con una imagen en grande del mismo dibujo.

<section> <article class='taz'> <img class='avatar' alt='' src='img.jpg' /> <div><!--mitad izquierda--> <h2>Taz<span>Eterno insastifecho</span></h2> <p>Un buen chico. Dinámico, proactivo...</p> <nav> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </nav> </div> <figure><!--mitad derecha--> <img class='big' alt='' src='img2.jpg' /> <figcaption> <span></span> <span></span> <span></span> </figcaption> </figure> </article> <!--más articles--> <section>

A esta composición del html sólo necesitamos declararle los estilos necesarios para ocultar la parte derecha (el 'figure') para que se presente con la apariencia que tiene en la parte izquierda de la imagen anterior.

Sólo es cuestión de aplicar algunos display: none y dar tamaño a cada cromo.

Los inputs como 'controles'

lightbox css plegadoEl paso siguiente es introducir los 'controles' para añadir funcionalidad: mostrar todo el contenido de cada article en el lightbox y cerrarlo.

Para ello utilizamos, una vez más, 'inputs' con su 'label' asociada. Cada input encargado de desplegar un 'article' en el lightbox lo colocamos justo precediendo al 'article' (y fuera de él) y su etiqueta (la caja roja de la imagen) allí donde queremos mostrarla en el html.

Si te perdiste, o no recuerdas, en el artículo "Múltiples labels por cada input y un input para controlarlas a todas" explicaba y ejemplificaba la característica de los inputs y sus labels referentes a que no hay que escribirlos adyacentes en el html para que mantengan el nexo entre cada par de ellos. La unión viene dada por tener el mismo valor en el valor del atributo del 'id' de uno y en el atributo 'for' de la otra.

<section> <input type="radio" id="taz" value="1" name="tractor" /> <article class='taz'> <img class='avatar' alt='' src='img.jpg' /> <div> <h2>Taz<span>Eterno insastifecho</span></h2> <label for='taz' class='bio'>ver bio</label> <!--resto del código html anterior-->

Con esta disposición sólo necesitaremos crear un selector genérico para que actúe el input. Sin necesidad de identificarlo por su 'id'. La especificidad de cada input para el 'article' correspondiente y sus contenidos lo logramos utilizando selectores de hermano adyacente del tipo :checked + article {}

Con el estado ':checked' de cada input anulamos o modificamos los valores de cada "componente del cromo" para las propiedades que tenemos declaradas al inicio de los estilos o añadimos otras nuevas que podemos necesitar al abrir el lightbox.

:checked + article { /*declaraciones para mostrar en el lightbox*/ } :checked + article div { width: 50%; padding-top: 2rem; } :checked + article figure { width: 50%; height: 100%; } :checked + article p { display: block; } /*escondemos el label del input por no ser necesario cuando esta desplegado*/ :checked + article .bio { display: none; }

De nuevo y otra vez: fíjate que los selectores son "genéricos". Da lo mismo que se seleccione un input u otro para que el 'article' que se despliega en el lightbox sea el que corresponde y no otro. También es indiferente que tengamos 4 cromos o 40. Todo por la disposición de cada input en el html.

La capa con opacity y el cierre del lightbox

Ya hemos logrado la apariencia inicial y la mostrada al desplegar cada cromo en el lightbox. Sólo nos resta por construir dos pequeños detalles: el fondo negro con transparencia que cubre la página y poder cerrar el lightbox a voluntad.

Overlay y cierre del lightbox puro Css

Para lograrlo volvemos otra vez a echar mano de un imput y su label. En esta ocasión el lugar a ocupar en el html es cualquiera antes de la caja general que contiene a todos los cromos. Para simplificar el selector yo lo coloco justo antes de abrir el 'section' que contiene todos los 'articles'.

<input type="radio" id="cierre" value="0" name="tractor" checked='checked' /> <label for='cierre'>×</label> <section> <!--Todos los articles y su contenido--> </section>

Fíjate que este input es el que de entrada está seleccionado checked='checked'. Y como todos comparten el mismo valor para el atributo 'name' nos aseguramos que al seleccionar cualquier otro este se desmarca.

El fondo negro con transparencia lo construimos con ayuda del pseudoelemento 'section::before' y lo mostramos sólo cuando este input no está seleccionado con ayuda de la pseudoclase ':not'

#cierre:not(:checked) ~ section:before { content:''; width: 100%; height: 100%; z-index: 1; opacity: 1; }

Y para terminar sólo nos resta las dos declaraciones para estilizar el elemento para cerrar el lightbox (una X) y mostrarla al desplegarlo o que quede oculta al cerrarlo.

[for='cierre'] { color: #FF7361; position: fixed; right: 3rem; top: 3rem; font-size: 10rem; line-height: 1rem; z-index: 20; } #cierre:checked + [for='cierre'] { display: none; }

La demo del lightbox puro Css en vivo

Y después de llegar hasta aquí (leyendo o haciendo scroll diréctamente) sólo te queda ver el lightbox en puro Css funcionando o bajarte los códigos para jugar con ellos.

See the Pen Lightbox pure Css. by Kseso (@Kseso) on CodePen

Ver demo a fullDescargar códigos (10kb)

¡¡Esto es todo, amigos!!

A todo lo anterior y para rematarlo en honor de los personales de cada cromo, sólo resta añadirle una pizca de transiciones y animaciones que puedes ver en el código.

Notas Finales:

  1. Todas las imágenes del post y de la demo de los personajes de los dibujos animados pertenecen a sus legítimos dueños. Sólo las utilizo con fines ilustrativos y didácticos en la demo.
  2. No utilizo @medias queries Css. Ya sabes lo que eso significa.
  3. Esta demo fue realizada en 2013. Hoy posíblemente estaría realizada utilizando el flexbox para la distribución de elementos.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso