Effet Lightbox en CSS3 grâce à transition

C’est en parcourant un lien partagé par Raphaël hier dans la journée, que je me suis décidé à tripoter un petit peu de CSS et HTML pour améliorer le rendu de M. Chris Coyier.

Où cela se passe-t-il ?

Vous trouverez les fichiers sur l’espace de test de CreativeJuiz, précisément à cette adresse :
http://www.creativejuiz.fr/trytotry/lightbox-with-tabindex-and-css3/

Le HTML

Le code HTML utilisé est vraiment basique. Pour pimenter le jeu j’ai utilisé HTML5.
L’idée c’est d’avoir un conteneur, une image et un titre pour l’image… rien de mieux qu’un jeu de figure et figcaption pour cela !

<figure tabindex="0"> 
   <img src="images/demo1.jpg" alt="Demo" /> 
   <figcaption>Rorschach Artefact</figcaption> 
</figure> 
<span></span> 
							
<figure tabindex="0"> 
   <img src="images/demo2.jpg" alt="Demo" /> 
   <figcaption>Mystic Light</figcaption> 
</figure> 
<span></span> 
							
<figure tabindex="0"> 
   <img src="images/demo3.jpg" alt="Demo" /> 
   <figcaption>A simple idea...</figcaption> 
</figure> 
<span></span>

Vous remarquerez l’ajout d’un attribut tabindex sur chacun des figure, le but est de permettre le focus sur ces éléments.
L’utilisation de span vides permettra d’imiter le petit overlay que l’on retrouve souvent sur les versions JavaScript des lightbox (fancybox, zommbox, etc.).

Le CSS

Nous allons bêtement effectuer des animations au focus des figure, c’est tout l’intérêt des tabindex :

#slideshow figure {
	position: relative;
	float: left;
	margin: 20px 37px;
	z-index: 100;
	width: 200px;
	background: #fff;
	border: 10px solid #fff;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	-webkit-box-shadow: 0 3px 10px #ccc; 
	-moz-box-shadow: 0 3px 10px #ccc;
	box-shadow: 0 3px 10px #ccc;
	
	-webkit-transition: all 0.7s ease; 
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
#slideshow figure img {
	width: 100%;
}
#slideshow figcaption {
	font-family: verdana, arial, sans-serif;
	font-size: 1.1em;
	text-align: center;
	color: #5d7885;
	background: #fff;
}

/*actions*/
#slideshow figure:focus {
	outline: none;
	z-index: 200;
	margin-top: 100px;
    -webkit-transform: scale(1.8); 
	-moz-transform: scale(1.8);
	-o-transform: scale(1.8);
	transform: scale(1.8);
    
	-webkit-box-shadow: 0 3px 10px #333; 
	-moz-box-shadow: 0 3px 10px #333;
	box-shadow: 0 3px 10px #333;
}

#slideshow figure:focus+span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 150;
	-moz-opacity: 0.6;
	-webkit-opacity: 0.6;
	opacity: 0.6;
}

Beaucoup de code, mais rien de bien compliqué, il y a beaucoup de lignes dupliquées à cause des différences de prise en charge de CSS3 des navigateurs 😉
Pour que l’effet overlay couvre tout le viewport, il faudra ruser pour que chaque parent du span soit à 100% en hauteur et sans position relatif (assez marrant en pratique, en effet).

Contenteditable

M. Chris Coyier, dans son article, utilisait (hier même) l’attribut HTML5 contenteditable pour rendre « focusable » un élément.
C’est toujours bon de savoir que des styles pourront être appliqués à ces éléments au contenu éditable, c’est un comportement qui devient donc très proche d’un simple input ou textarea.

Liens utiles :
– TryToTry – Espace de test de CreativeJuiz
– TryToTry – Lightbox en CSS3 avec Tabindex
– Article de Chris Coyier sur le sujet