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.
PASO 2
Creamos un nuevo documento HTML en blanco en Dreamweaver.
PASO 3
Con el comando Ctrl + S guardamos el documento con el nombre que prefiramos.
PASO 4
Ahora colocamos el siguiente código entre las dos etiquetas de <body> </body>
<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>
PASO 5
Vamos al menú File – New y escogemos un documento CSS.
PASO 6
Con el comando Ctrl + S salvamos nuestro documento dentro de una carpeta llamada CSS con el nombre de polaroid.css
PASO 7
Copiamos el siguiente código dentro de nuestro documento:
* { 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.
<link href=”css/polaroid.css” rel=”stylesheet” type=”text/css” />
PASO 9
Listo ya tenemos nuestra galería terminada; pulsamos la tecla F12 para ver la vista previa.
Descarga el editable de Galeria Polaroid en CSS
Rosy
11. Jan, 2013
Hello, I’ve found your stuff pretty usfeul but you can enhance it by answering my question )) will it be effective if I use the natures cure tablet and cream WITH the natures cure three step anti-pimples papaya cleansing system? What would happen if I would use these all together, will if be efficient?