Hola amigos en este tutorial les enseñare a crear una galería normar, pero con el mas puro efecto de CSS3 les encantara.
Echa un vistazo al demo para ver lo que vamos a construir. Recuerden que, debido a que va a utilizar un par de propiedades de CSS3, los usuarios con IE no verán efecto completo, pero los navegadores tales como Firefox y Chrome podrán disfrutar de toda la experiencia. Vamos a utilizar CSS básico para el estilo de las fotos, en un estilo de imágenes Polaroid, y luego pondremos un poco de estilo adicional con sombras y la rotación, a continuación, utilizar la propiedad z-index para alterar el orden de apilamiento de los objetos.
Empezaremos a trabajar primero es obtener la imágenes miniaturas para que aparezcan en la galería crearan el directorio imágenes y meter hay las miniaturas, yo las e sacado de Flickr, y se las pongo aquí, pero ustedes saben las que usan.
Links:
http://www.flickr.com/photos/claudio_ar/2214532638
http://www.flickr.com/photos/galego/3131005845
http://www.flickr.com/photos/claudio_ar/1810490865
http://www.flickr.com/photos/claudio_ar/2952099761
http://www.flickr.com/photos/claudio_ar/2811295698
http://www.flickr.com/photos/claudio_ar/2601700491
Lo siguiente es configurar la estructura de página básica con un contenedor centrado en la página. Use una textura de madera de fondo y la repetí a y claro esto va en nuestra hoja de estilos.
body {
background: #959796 url(images/wood-repeat.jpg);
}
#container {
width: 600px; margin: 40px auto;
}
Y esta es la estructura de nuestro documento HTML:
<div id="container">
<h1>Galería de imágenes con CSS</h1>
<h2><a href="http://www.taringa.net/misa2pac22">Misa2pac22</a></h2>
<ul class="gallery">
<li><a href="#"><img src="images/1.jpg" /></a></li>
<li><a href="#"><img src="images/2.jpg" /></a></li>
<li><a href="#"><img src="images/3.jpg" /></a></li>
<li><a href="#"><img src="images/4.jpg" /></a></li>
<li><a href="#"><img src="images/5.jpg" /></a></li>
<li><a href="#"><img src="images/6.jpg" /></a></li>
</ul>
</div>
Semánticamente se diseña la galería en forma de lista desordenada pues lo hemos echo con listas y no con tablas además se le añade la viñeta, y no olvides darles la descripción adecuada.
Ahora tenemos que empezar a trabajar en la CSS de la galería. En primer lugar, vamos a querer quitar los gráficos de punto que aparecen en la lista de elementos. Sólo tiene que utilizar list-style: none para eliminaros.
ul.gallery {
list-style: none;
}
Ahora de daremos el efecto Polaroid a las imágenes mediante la adición de algunos estilos a los anclajes. En primer lugar un float a la izquierda para que se apile al lado del otro, a continuación, añadir un poco de relleno. El establecimiento de un fondo de un color gris claro entonces dará la tradicional forma de Polaroid. Para terminar con esto un toque muy sutil en la forma de un borde blanco 1px.
ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
margin:4px;
}
Ahora añadimos un poco de realismo al diseño, el uso del propiedad box-shadow de CSS3, para añadir un poco de sombra a las fotos. Para garantizar el orden de apilamiento de las obras posteriores, también tendrá que añadir position: relative a la CSS.
ul.gallery li a {
float: left;
padding: 10px 10px 25px 10px;
background: #eee;
border: 1px solid #fff;
margin:4px;
-moz-box-shadow: 0px 2px 15px #333;
position: relative;
}
Ahora tenemos que apuntar a cada imagen por separado, por lo que hay que volver atrás y dar a cada imagen un class único en los links en <a>.
Ya definidos los class, podemos añadir un estilo único a cada foto. Escribimos en nuestro CSS y especificamos un diferente z-index en cada imagen y un poco de CSS3 para la rotación.
ul.gallery li a.pic-1 {
z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
ul.gallery li a.pic-2 {
z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
}
ul.gallery li a.pic-3 {
z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
}
La pila de fotos Polaroid ahora debe ser superpuesta entre sí y tienen la apariencia de ser colocados al azar en la superficie de madera.
Le damos ahora para terminal la propiedad :hover para ajustar el z-index y una cifra más alta, esto asegurará que cada imagen salta a la parte superior de la pila cuando se selecciona con el ratón. También puede ajustar el box-shadow para dar la impresión de que la foto ha levantado fuera de la pantalla.
ul.gallery li a:hover {
z-index: 10;
-moz-box-shadow: 3px 5px 15px #333;
}
Y eso es todo ya ustedes pueden jugar con la galería y porque combinar este tutorial , para que les quede aun mejor.
Espero que les haya agradado este pequeño tutorial, no olviden comentar, y cualquier duda pueden mandarme un MP, gracias.