22
JUIN

Futurebox : une lightbox 100% CSS, sans javascript

Publié le 22/06/09 à 08h05 par Ouark

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.

Lightbox sans javascript

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

Baraguiné par HammHetfield le 22/06/09 à 08h49
HammHetfield sur La Ferme du Web
Ah ouai tiens, étonnant qu'on ai pas plus parlé de ce truc là, parce que c'est vrai que c'est pas mal, même si faut reconnaitre que niveau visuel ça reste bien plus limité que les belles lightbox animées qu'on trouve depuis quelques temps déjà ^^

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web