Contenido

Futurebox, el lightbox sin Javascript

21 jun

+ 7

La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3.

futurebox
(Ver Imagen)

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.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.