Foros del Web » Creando para Internet » HTML »

Pequeña prueba CSS3 - Cartelera de perros perdidos

 Estas en el tema de Pequeña prueba CSS3 - Cartelera de perros perdidos en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/10/2011, 10:01
Avatar de Webstudio
Colaborador
  
Fecha de Ingreso: noviembre-2001
Ubicación: 127.0.0.1
Mensajes: 3.499
Antigüedad: 23 años, 1 mes
Puntos: 69
Pequeña prueba CSS3 - Cartelera de perros perdidos
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? )
__________________
Tutoriales Photoshop | Web-Studio.com.ar
Artículos PHP | ZonaPHP.com
  #2 (permalink)  
Antiguo 19/10/2011, 10:37
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 6 meses
Puntos: 834
Respuesta: Pequeña prueba CSS3 - Cartelera de perros perdidos
Lo que habría que hacer es que se vea mejor en Explorer 8/7 aunque sea sin efectos (convertir los tagNames no soportados con algún script).
  #3 (permalink)  
Antiguo 19/10/2011, 10:53
Avatar de Webstudio
Colaborador
  
Fecha de Ingreso: noviembre-2001
Ubicación: 127.0.0.1
Mensajes: 3.499
Antigüedad: 23 años, 1 mes
Puntos: 69
Respuesta: Pequeña prueba CSS3 - Cartelera de perros perdidos
Panino5001, pero hombre !!! Dónde está sus ansias de compartir con el resto de la gente del foro?
Contame como lo harías, o simplemente, modificalo y postealo :)
( ie8 y 9, habría que erradicarte del mundo, como hicimos con tu hermano 6 )
__________________
Tutoriales Photoshop | Web-Studio.com.ar
Artículos PHP | ZonaPHP.com
  #4 (permalink)  
Antiguo 19/10/2011, 11:02
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 6 meses
Puntos: 834
Respuesta: Pequeña prueba CSS3 - Cartelera de perros perdidos
jaja, no bien pueda lo convierto (estoy complicado con una entrega )
  #5 (permalink)  
Antiguo 19/10/2011, 11:15
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 6 meses
Puntos: 834
Respuesta: Pequeña prueba CSS3 - Cartelera de perros perdidos
Algo muy rápido porque ando corriendo:
Código PHP:
<!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>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
  </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> 
No queda muy lindo, pero degrada mejor
  #6 (permalink)  
Antiguo 20/10/2011, 02:37
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: Pequeña prueba CSS3 - Cartelera de perros perdidos
Hola:

Cita:
Iniciado por Webstudio Ver Mensaje
Un amigo tiene un sitio llamado [url]( 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? )
Eso ya lo hice hace mucho tiempo: Probador de scripts

Aunque se llame probador de script, se vuelca el contenido del textarea en una ventana vacía...

La verdad es que se ve muy bien la "Cartelera".

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 20/10/2011, 09:48
Avatar de Webstudio
Colaborador
  
Fecha de Ingreso: noviembre-2001
Ubicación: 127.0.0.1
Mensajes: 3.499
Antigüedad: 23 años, 1 mes
Puntos: 69
Respuesta: Pequeña prueba CSS3 - Cartelera de perros perdidos
Muy bueno Caricatos !
Igualmente estaba hablando de algo más integrado al Foro... sobre todo con HTML5, estamos todos queriendo probar las cosas :P ( todos... o yo, no se )
__________________
Tutoriales Photoshop | Web-Studio.com.ar
Artículos PHP | ZonaPHP.com

Etiquetas: css3, pequeña, perdidos, prueba
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 03:14.