Galeria Polaroid en CSS | Tutoriales en la Web

Galeria polaroid CSS

Posteado el 10. Jun, 2010 por Webi in Desarrollo Web, HTML y CSS

Aqui puede ver lo que aprenderemos hoy

PASO 1

Creamos una carpeta llamada imágenes en la cual copiamos todas las imágenes que vamos a utilizar para nuestra galería.

Galeria polaroid CSS

PASO 2

Creamos un nuevo documento HTML en blanco en Dreamweaver.

Galeria polaroid CSS

PASO 3

Con el comando Ctrl + S guardamos el documento con el nombre que prefiramos.

Galeria polaroid CSS

PASO 4

Ahora colocamos el siguiente código entre las dos etiquetas de <body> </body>

Code block

<div id="container">
 
<h1>Galería de Fotos polaroid en CSS</h1>
 
<h2><a href="http://www.tutorialesenlaweb.com">Tutoriales en la web</a></h2>
 
<ul class="gallery">
 
<li><a href="http://www.tutorialesenlaweb.com"
 
class="pic-1"><img src="imagenes/1.jpg" alt="Photograph of a
 
waterfall"><br />
 
</a></li>
 
<li><a href="http://www.tutorialesenlaweb.com"
 
class="pic-2"><img src="imagenes/2.jpg" alt="Photograph of clouds and
 
sunlight"></a></li>
 
<li><a href="http://www.tutorialesenlaweb.com"
 
class="pic-3"><img src="imagenes/3.jpg" alt="Photograph of a lake
 
scene at dusk"></a></li>
 
<li><a href="http://www.tutorialesenlaweb.com"
 
class="pic-4"><img src="imagenes/4.jpg" alt="Photograph of a tree and
 
green grass"></a></li>
 
<li><a href="http://www.tutorialesenlaweb.com"
 
class="pic-5"><img src="imagenes/5.jpg" alt="Photograph of a beach
 
sunset"></a></li>
 
<li><a href="http://www.tutorialesenlaweb.com"
 
class="pic-6"><img src="imagenes/6.jpg" alt="Photograph of a flower
 
and lake"></a></li>
 
</ul>
 
</div>

Galeria polaroid CSS

PASO 5

Vamos al menú File – New y escogemos un documento CSS.

Galeria polaroid CSS

PASO 6

Con el comando Ctrl + S salvamos nuestro documento dentro de una carpeta llamada CSS con el nombre de polaroid.css

Galeria polaroid CSS

PASO 7

Copiamos el siguiente código dentro de nuestro documento:

Galeria polaroid CSS

Code block

* { margin: 0; padding: 0; border: 0; }
 
body {
 
background-color: #959796;
 
background-image: url(../imagenes/fondo.jpg);
 
}
 
#container {
 
width: 600px; margin: 40px auto;
 
}
 
h1 {
 
font: bold 65px/60px Helvetica, Arial, Sans-serif;
 
text-align: center; color: #eee;
 
text-shadow: 0px 2px 6px #333;
 
}
 
h2 a {
 
display: block; text-decoration: none; margin: 0 0 30px 0;
 
font: italic 45px Georgia, Times, Serif;
 
text-align: center; color: #bfe1f1;
 
text-shadow: 0px 2px 6px #333;
 
}
 
h2 a:hover {
 
color: #90bcd0;
 
}
 
ul.gallery {
 
list-style: none;
 
}
 
ul.gallery li a {
 
position: relative;
 
float: left;
 
padding: 10px 10px 25px 10px;
 
background: #eee;
 
border: 1px solid #fff;
 
-moz-box-shadow: 0px 2px 15px #333;
 
}
 
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);
 
}
 
ul.gallery li a.pic-4 {
 
z-index: 4;
 
-webkit-transform: rotate(14deg);
 
-moz-transform: rotate(14deg);
 
}
 
ul.gallery li a.pic-5 {
 
z-index: 2;
 
-webkit-transform: rotate(-12deg);
 
-moz-transform: rotate(-12deg);
 
}
 
ul.gallery li a.pic-6 {
 
z-index: 6;
 
-webkit-transform: rotate(5deg);
 
-moz-transform: rotate(5deg);
 
}
 
ul.gallery li a:hover {
 
z-index: 10;
 
-moz-box-shadow: 3px 5px 15px #333;
 
}

PASO 8

Ahora regresamos a nuestro documento HTML y debajo de la etiqueta <title> </title> colocamos el siguiente código para enlazar nuestro HTML con el CSS.