Futurebox : une lightbox 100% CSS, sans javascript

Il nous arrive fréquement de parler, sur la Ferme, des lightboxs, toutes ayant ont en commun l'utilisation du javascript pour fonctionner. Au contraire de Futurebox qui est 100% CSS.

Futurebox repose sur la pseudo class, :target, issue des spécifications du CSS3. Elle est donc compatible avec les browsers suivants:

• Firefox 1.5+
• Safari 3.2+
• Chrome 2+
• Opera 9.5+

Utilisation

Le principe est de récupérer le lien de l'ancre contenu dans une URL qui peut-être référencé dans la feuille de style en utilisant la propriété :target.
Si l'ancre correspond à l'identifiant d'un élément html, les styles css correspondants s'afficheront.

Le code html:

<a href="#futurebox_img1">
	<img 
		src="gr_ninja-attack_med.gif" 
		width="100" 
		height="102" 
		alt="The CSS Ninja" 
		id="futurebox01" 
	/>
</a>
 
<div class="overlay" id="futurebox_img1">
	<a href="#close" title="Close future box">
		<img 
			src="gr_cssninja_lrg.png" 
			alt="The Css Ninja" 
			width="600" 
			height="639" 
		/>
	</a>
</div>

La feuille de style:

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 a
	{
		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; }

Démo - Site officiel