Soy estudioso autodidacta del CSS. Investigo todos los temas relacionados a su ámbito, y lo compilo en este blog, haciendo las correspondientes menciones de sus fuentes originales. Blog educativo, compilador, todo usuario sin fines de lucro. Angel Paz
Las liaghtBos son ventanas que se abren encima de la página web, sin ocupar espacio, como flotando. Pueden contener iménges, vidioes, texto... Es habitual verlas como contendor para carusles de imágenes.
Aunque hay muchos programas elaborados con javascript para lograr este efect, vas a ver que puedes tener una lighbox sin programar, solo con HTML y un poco de CSS.
El efecto se base en los pseudo slectores, concretamente en :target
Nuestro código tiene dos elementos:
<a class="abrirLB" href="#Ventana">Abrir lightbox</a>
<div id="Ventana">
<div class="contenido">
<a class="cerrarLB" href="#">Cerrar X </a>
<img src="/imgs/cards0-img.jpg" width="401" height="301" alt=""/>
</div>
</div>
El elemento qeu va a abir la ventana es un enlace interno a la propia página (#Ventana). El bloque lightBox es el que tiene como identificador Ventana y contiene un bloque de class="contenido" con el enelace de cierre (un elnace vació en este caso) y el contendio que en esta ocasión es una imagen, pero puedes poner un bloque con lo que quieras.La magia del CSS en eta ocasión se base en el pseudo selector #ident:target que selecciona aquellos elementos cuyo id concide con el componente # que siga a la url de la página.
Por ejemplo si accedes a la página index.htm#seccion el selector #seccion:target selecciona el bloque cuyo id= seccion . En otras palabras: selecciona el destino del enlace en el interior de la página web.
Al pulsar sobre el enlace interno se aplica al bloque de destino el estilo seleccionado. Originalmente este bloque está oculto, al seleccionarlo se pone visible, con un botón que enlaza a la porpia página para cerrar así la ventana.
html, body{height:100%}
.abrirLB{
text-decoration:none;
}
#Ventana{
display:none
}
#Ventana:target{
display:flex;
align-items:center;
justify-content:center;
position:absolute;
top:0;
left:0;
background-color:rgba(0,0,0,0.56);
width: 100%;
height: 100%;
}
.contenido{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
top:0;
left:0;
margin: 0 auto;
}
.cerrarLB{
align-self:flex-end;
color:white;
text-decoration:none;
}
_____________________________________________________________________________________
Bibliografía:
https://creatuweb.espaciolatino.com/como_se_hace/lightbox.htm
No hay comentarios.:
Publicar un comentario
Nota: sólo los miembros de este blog pueden publicar comentarios.