Esto es todo, amigos. Un lightbox de dibujos animados puro Css 11.2.16
Un lightbox de dibujos animados en puro Css. Sencillo de realizar y adaptar a cualquier necesidad y fácil de mantener y modificar.
Esto es todo, amigos. Un lightbox de dibujos animados puro Css
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:
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.
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'
El 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.
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 full ⌘ Descargar 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:
- 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.
- No utilizo @medias queries Css. Ya sabes lo que eso significa.
- Esta demo fue realizada en 2013. Hoy posíblemente estaría realizada utilizando el flexbox para la distribución de elementos.
Kseso
the obCSServer ᛯ 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 Kseso
Excelente! Amo este blog, tanto por el contenido como por el diseño del mismo!!!
ResponderEliminarMuy bueno aunque pensé que se podría pasar de una imagen a otra con el típico sistema de flechitas cuando el fondo se torna oscuro y hay una imagen adelante. Solo por curiosidad, a nivel de rendimiento ¿lo has comparado con algo similar hecho con javascript?.
ResponderEliminarHola Alejandro.
ResponderEliminarEse detalle (link para elemento anterior o posterior) lo tienes explicado hace escasos días en la demo del slide "Múltiples labels por cada input y un input para controlarlas a todas".
Comparativa con js en este caso no he realizado. Apostaría por menos carga y consumo de recursos en Css (frente a mayor soporte en navegadores obsoletos en javascript).
Hace tiempo publiqué algo al respecto.
Aclarado, Gracias
Eliminargracias por el aporte Kseso.
ResponderEliminarExcelente! Wow no sabes lo que esto significa para mi! jejeje bueno así de exagerado tampoco, pero es increíble! Por cierto se que no esta demás preguntar, pero ¿Retrocompatibilidad? ¿IE? No hay una nota de advertencia con que es una demo solo con fines experimentales, por lo que si me animo a usarlo por lo menos en un sitio personal, crees que con modernizr o con un js magico se pueda ver bien, por lo menos en IE=+8? Lo siento es que esta genial y pa´ un parbulito/preescolar del css como yo, esto vale oro y quiero comprarlo! ;)
ResponderEliminarLo he estado comprobando y funciona correctamente en IE 10 y 9 (aunque en este último sin las animaciones). En IE 8 e inferiores se desmonta prácticamente todo (captura).
EliminarPersonalmente, yo no usaría JS para ofrecer compatibilidad con IE8 (esta versión salió en 2009, es la última que se puede instalar en XP y viene preinstalada en Vista), simplemente podría un aviso con comentarios condicionales; a largo plazo te ahorras bastante tiempo.
Hola G3kdigital
EliminarTodo, absolutamente todo lo que hagas con lo que te encuentres por intenet o por la calle o en la playa es responsabilidad exclusiva tuya. Máxime si, como es el caso de este blog, no se paga ni un céntimo (ni por soportar elementos intrusivos).
Pero sí hay una advertencia desde hace mucho, la tienes al pie de todas las páginas, enlace "licencia beerware".
Sobre la retrocompatibilidad (ya en otro comentario te pregunté al respecto sin tener respuesta) te voy a contar un secreto de procedimiento.
Hay dos formas de proceder:
1ª: La directa o empírica. Abrir la demo con el navegador y versión correspondiente y ver qué ocurre.
2ª: La indirecta o analista: ver qué propiedades/valores son los que hacen funcionar la demo y consultar su soporte por los distintos navegadores y sus versiones en alguna página dedicada a ello (como caniuse o quirksmode.org)
Y después de ello si persiste alguna duda o se necesita más info plantearlo.
Espero que veas esta respuesta sólo como lo que es: una ayuda, para ti y cualquier otro lector del blog, útil y válida como herramienta no sólo para esta inquietud sino para cualquier otra.
Un saludo
Gracias por seguir compartiendo tutoriales increíbles, bien explicados, y mostrar que el css tiene un tremendo poder !!!
ResponderEliminarSaludos!!!