La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3.
El resultado es muy similiar al ofrecido por cualquiera de las versiones de Lightbox, salvo que con esta versión no disfrutaremos de efectos ni de funcionalidades que nos permitan interactuar con la foto (pasar fotos, cambiar tamaño, moverla por pantalla). Sin duda se trata de un experimento CSS muy interesante.
¿Como funciona?
Veamos el código para entender como han conseguido hacer este efecto.
// HTML
// Miniaturas
<a href="#futurebox_img1">
<img
src="gr_ninja-attack_med.gif"
width="100"
height="102"
alt="The CSS Ninja"
id="futurebox01"
/>
</a>
// Contenedor de imagenes grandes (uno por cada imagen grande)
<div class="overlay" id="futurebox_img1">
<div class="overlay_container">
<a href="#close" title="Close future box">
<img
src="gr_cssninja_lrg.png"
alt="The Css Ninja"
width="600"
height="639"
/>
</a>
</div>
</div>
// CSS
html, body { height: 100%; }
.overlay
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
z-index: 999;
background: rgba(0,0,0,0.7);
}
.overlay .overlay_container
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.overlay_container img
{
background: #ffffff;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.overlay:target { display: table; }Como podemos ver la mágia del script es el uso de :target para aplicar el display: table; al fondo de la pantalla (.overlay). Gracias a este pseudo-selector detectamos cuando un enlace-ancla lo está referenciando y al ser este accionado, aplicará el estilo asociado.
Evidentemente por el momento este código, únicamente funcionará en Firefox 1.5+, Safari 3.2+, Chrome 2+ y Opera 9.5+, echarle un vistazo a la demo y vereis lo bien que queda.
6 comentarios, 1 referencias
+
#