Comunidad de diseño web y desarrollo en internet online

BOOK DE IMAGENES AL100% WIDTH DEL NAVEGADOR

Citar            
MensajeEscrito el 19 May 2014 04:11 am
Hola a todos. Primero, gracias por ingresar y ver si puedes ayudarme.
Mi consulta es super sencilla. Quiero hacer un book, e html5 y css o css3 que se vea igual que en el siguiente link:

http://www.piratas.tv/new/?page_id=33


He buscado pero no encuentro nada especificamente a lo que necesito hacer.


Muchas gracias por su tiempo.

Atte
Jose_zapata

Por teladejuicio

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 10 Jul 2014 11:11 am
En primer lugar, son 4 imagenes/columnas, asi que es muy fácil, imaginate, te creas un estilo dandole a las imagenes un 25% de ancho, 25x4=100% y así haces el 100% de la pantalla, luego solo te queda el responsive, que segun vaya haciendo la pantalla mas pequeña se bajen las imagenes, aun que podrias no hacer nada, por que como esta ya puesto el tamaño en % se van a ir encongiendo, el problema es que se veran muy pequeñas, asi que para que eso no ocurra es fácil, solo tienes que hacer un par de @media query, que cuando llegue a ciertos pixeles el ancho sea mas grande, por ejemplo, para que pasen a ser 3 imagenes de seguido y no 4, pues le pones width 33.33333332%, tiene que ser una cosa así:

Código CSS :

.imagenes{
float:left;
width:25%;
}
@media all and (max-width:1000px) and (min-width:700px){
.imagenes{
float:left;
width:33.3333332%;
}
}

@media all and (max-width:699px) and (min-width:300px){
.imagenes{
float:left;
width:50%;
}
}


Espero que te sirva, suerte.

Por Cerberupo

25 de clabLevel



Genero:Masculino  

Programador web freelance

firefox

 

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