Comunidad de diseño web y desarrollo en internet online

Galeria de imagenes fluída

Citar            
MensajeEscrito el 02 Jun 2013 03:38 pm
Buenas, estoy tratando de hacer una sencilla galeria de imágenes con Dreamweavers CS6, usando comportamientos, para una web responsive design. Me gustaría saber si conoceis algún sencillo tutorial en el que no haga falta usar jquerys puesto que aún estoy empezando y soy muy torpe.

No hago más que buscar y no doy con un tutorial que me resulte sencillo de crear con sólo usar HTML+CSS3

¿Podríais ayudarme?

Por esmon

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Jul 2013 07:03 pm
Puff te sale mas a cuenta aprender un poco de js xD Yo me hice una galería en css3 con el comando animation y @keyframes pero es rayarse mucho la cabeza para cuadrar los tiempos ademas de que luego se va a ver en poco exploradores ya que css3 todavía no esta muy implementado, pero bueno si quieres seguir adelante te explico como hacerlo imagina que quieres tres imágenes y que pasen solas, pues yo haría :

Código HTML :

.animacion{
opacity:1;
   animation:animacion 10s infinite ease;
   -webkit-animation:animacion 10s infinite ease;
   -moz-animation:animacion 10s infinite ease;
   -o-animation:animacion 10s infinite ease;
   }


Código HTML :

.animacion2{
opacity:0;
   animation:animacion2 10s infinite ease;
   -webkit-animation:animacion2 10s infinite ease;
   -moz-animation:animacion2 10s infinite ease;
   -o-animation:animacion2 10s infinite ease;
   }


Código HTML :

.animacion3{
opacity:0;
   animation:animacion3 10s infinite ease;
   -webkit-animation:animacion3 10s infinite ease;
   -moz-animation:animacion3 10s infinite ease;
   -o-animation:animacion3 10s infinite ease;
   }


Código CSS :

@keyframes animacion {
   0% {opacity:1}
   20% {opacity:1}
   21% {opacity:0}
   100% {opacity:0}
}


Código CSS :

@keyframes animacion2 {
   0% {opacity:0}
   20% {opacity:0}
   21% {opacity:1}
40%{opacity:1}
41% {opacity:0}
   100% {opacity:0}
}


Código CSS :

@keyframes animacion3 {
   0% {opacity:0}
   41% {opacity:0}
   42% {opacity:1}
60%{opacity:1}
61%{opacity:0}
   100% {opacity:0}
}



Seria algo así, si sabes css3 supongo que conseguirás sacarte la galería pero es lo que te digo con js se hacen galerías que le dan mil vueltas a esto xD. Aquí te dejo de donde te puedes bajar un galería JQuery esta explicado por mi, cuando veas los comentarios del html entenderás como funciona es muy sencillo :)
http://paginaswebcerberupo.com/galeria_automatica_jquery_uno.html

Animo!!

Por Cerberupo

25 de clabLevel



Genero:Masculino  

Programador web freelance

chrome
Citar            
MensajeEscrito el 24 Jul 2013 08:42 pm
Prueba con algún plugin de jQuery, no tienes que saber nada de programación...

Te recomiendo flexslider.

Por walden

Claber

120 de clabLevel



 

safari

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.