Crear una galería de imagen con CSS

A causa de hacer un ejercicio para la clase DIW, vi una cosa muy interesante. No la pude usar en el ejercicio. Pero me pareció interesante para ello voy a explicar en esta entrada de como hacer una galería imagen con CSS.

1. Antes de empezar tendremos que tener algunas imágenes para crear la galería.

2. 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. (La textura de madera no es obligatorio hacerlo, pero en mi caso lo he puesto en el código, pero realmente no se está utilizando).

  Y esta es la estructura de nuestro documento HTML:

3.  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.

4. 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.

5. 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.

6. 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.

7. 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>.

8. 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.

9. 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.

Aquí se termina el tutorial para crear una galería de iamgen con CSS, espero que este tutorial le sea de gran ayuda. Gracias.