lightbox CSS

tb_futureboxJusqu’à présent il était impossible de faire un effet lightbox (thickbox) sans javascript mais avec Futurebox cela s’annonce maintenant possible.
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+

Pas de surprise sur IE!

futurebox

Utilisation

Comme mentionné ci-dessus le tout est seulement possible en raison de la CSS3 :target (pseudo classe : ne fonctionnera donc pas sous IE).

En récupérant le lien de l’ancre dans un URL (#futurebox_img1) qui peut être référencé dans votre CSS en utilisant :target.

Si un élément a un identifiant (id= »futurebox01″) qui correspond à l’URL les styles seront appliqués.

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

La démonstration se trouve ici :Démo

Visiter le Site officiel

télécharger FutureBox

A voir aussi

Réseau

Sites