Un amigo tiene un sitio llamado
http://www.perrosycachorros.com/ y me pidió una mano para modificar su cartelera de perros perdidos. En unos 20 minutos le hice este ejemplo, y ahora se los quiero compartir a ustedes para que me digan que les parece o cómo lo mejorarían :
Código HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Cartelera de perros</title>
<style type="text/css">
#cartelera {
background: url("http://www.canvascrew.co.uk/montage/slides/CorkBoard.jpg");
-webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.4) ;
box-shadow: px 4px 10px rgba(0,0,0,0.4);
border: 4px solid rgba(51,0,0,0.7);
border-radius: 1%;
height: 600px;
margin: 0 auto;
width: 800px;
}
#cartelera article {
display: inline-block;
background: white;
box-shadow: 2px 2px 2px 5px rgba(0,0,0,0.3);
margin: 10px;
text-align: center;
width: 200px;
-moz-transition: -moz-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
transition: transform .5s ease-in;
z-index: 1;
}
/*#cartelera article:hover {
box-shadow: 2px 2px 2px 5px rgba(0,0,0,0.3),
0 0 10px 15px rgba(0,0,0,0.2);
-webkit-transition: box-shadow 1s linear;
-moz-transition: box-shadow 1s linear;
transition: box-shadow 1s linear;
}*/
#cartelera article:nth-of-type(2n) {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
transform: rotate(3deg);
}
#cartelera article:nth-of-type(2n+3) {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
#cartelera article:nth-of-type(3n-1) {
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
transform: rotate(-1deg);
}
#cartelera article:hover {
-moz-transform: rotate(0deg) scale(1.4);
-webkit-transform: rotate(0deg) scale(1.4);
transform: rotate(0deg) scale(1.4);
-moz-transition: -moz-transform .5s ease-in;
-webkit-transition: -webkit-transform .5s ease-in;
transition: transform .5s ease-in;
z-index: 20;
}
</style>
</head>
<body>
<section id="cartelera">
<article>
<header>
<h2>Perro 1</h2>
</header>
<img width="100" height="100"
src="http://www.somosperros.com/razas-de-perros/beagle.jpg" alt="" />
<p>Se me perdió el perro 1</p>
</article>
<article>
<header>
<h2>Perro 1</h2>
</header>
<img width="100" height="100"
src="http://www.defondos.com/bulkupload/perros-fotos/Animales/Perros/Perro%20Labrador_800.jpg" alt="" />
<p>Se me perdió el perro 1</p>
</article>
<article>
<header>
<h2>Perro 1</h2>
</header>
<img width="100" height="100"
src="http://www.elblogdeperros.com/wp-content/uploads/2009/07/perro-anciano.jpg" alt="" />
<p>Se me perdió el perro 1</p>
</article>
<article>
<header>
<h2>Perro 1</h2>
</header>
<img width="100" height="100"
src="http://www.somosperros.com/razas-de-perros/beagle.jpg" alt="" />
<p>Se me perdió el perro 1</p>
</article>
<article>
<header>
<h2>Perro 1</h2>
</header>
<img width="100" height="100"
src="http://www.elblogdeperros.com/wp-content/uploads/2009/07/perro-anciano.jpg" alt="" />
<p>Se me perdió el perro 1</p>
</article>
<article>
<header>
<h2>Perro 1</h2>
</header>
<img width="100" height="100"
src="http://www.defondos.com/bulkupload/perros-fotos/Animales/Perros/Perro%20Labrador_800.jpg" alt="" />
<p>Se me perdió el perro 1</p>
</article>
</section>
</body>
</html> Saludos !
( sería interesante contar con una opción que sea "ver esté código como un demo" para poder probarlo sin tener que copiar y pegar en un archivo aparte, no? )