Lightbox con CSS3

Codrops realiza un experimento con CSS3 haciendo un lightbox con tres tipos de animaciones, tan solo

necesitamos incluir una hoja de estilos que realizara la funcionalidad de lightbox y una estructura HTML donde tendremos el thumbnail y la foto expandida.

Mediante la pseudo clase :target podemos abrir lightbox e incluso navegar entre ellos sin una sola línea de JavaScript.
Primero debemos descargar el código desde el siguiente link.
Descargar Lightbox CSS3
Ahora buscamos la carpeta /css donde están las tres hojas de estilo, solo debemos incluir una, cada CSS tiene diferente animación y todas sirven para abrir un lightbox.
[html]
<link rel="stylesheet" type="text/css" href="css/style.css" />
[/html]
Lo siguiente será escribir nuestro HTML con la siguiente

estructura.
[html]
<ul class="lb-album">
<!– start –>
<li>
<!– thumbnail –>
<a href="#image2">
<img src="images/thumbs/2.jpg" alt="image02"/>
<span>Pointe</span>
</a>
<!– end thumbnail –>
<!– lightbox –>
<div class="lb-overlay" id="image2">
<img src="images/full/2.jpg" alt="image01" />
<div>
<h3>pointe <span>/point/</span></h3>
<p>Dance performed on the tips of the toes</p>
<a href="#image1" class="lb-prev">Prev</a>
<a href="#image3" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
<!– end lightbox –>
</li>
<!– end –>
<li>
<!– more –>
</li>
</ul>
[/html]

Demo 1

Demo 2

Demo 3

Descargar Lightbox CSS3
Vía: Codrops

zp8497586rq

Generador de Sprites CSS online con Stitches

Stitches es una herramienta Web Open Source desarrollada en HTML5 y jQuery, que nos permite la creación de Sprites CSS online.
La funcionalidad es la siguiente: la primera vista es una caja donde dice “Drop images Here”, ahí tendremos que jalar y soltar todas las imágenes que deseamos incluir en nuestro Sprite, luego dar clic al botón genérate para activar los otros iconos de Sprite y StyleSheet, que nos abrirá la imagen fusionada y el CSS generado respectivamente.

stitches.jpg” />
Esta herramienta actualmente esta disponible en Firefox y chrome, por alguna compatibilidad de APIs HTML5 para el Drag & Drop, para navegadores antiguos utiliza Modernizr, Dropfile y Flashcanvas.
Esta herramienta estará sin duda en los favoritos de muchos usuarios, y yo me incluyo.
Ver demo
Descargar Stitches

zp8497586rq