CSS: Gradient layout
6 seguidores
El tema es que tengo este layout base:
http://www.youpayimake.com/extras/gradient.jpg
¿Cuál sería la mejor forma de maquetarlo con CSS? Metiendo las imágenes directamente en sus divs y rellenando con un backgroundcolor por si crece el div? ¿O haciendo background repeat los gradients? Estoy buscando algún tuto o source a ver si me iliumina... Thanx!
markshock
ostras!
thankiu... es que ya no entiendo cuando me hablan si n me lo explican con X, FOR o IF... jajajaja
t.a.a.r.q.
markshock
chile sigo mareao con lo que has dicho.. jajaja ostia neeeeng!
Es fácil, haz una imágen del encabezado de 1px de ancho por lo que sea, y aplicas algo similar a <code>background:#FFF url(tu_imagen.jpg) repeat-x center;</code>
Eso en los estilos del encabezado.
Para el contenedor de debajo, al ser un radial, te basta con un<code>background:#666 url(tu_otra_imagen.jpg) no-repeat center top;</code>
Y para el body del documento, para poder crear el efecto de sombra alrededor del contenedor principal, tendrías que crear una imágen de 1px de altura por lo que sea de ancho y repetirla en el eje Y, de una forma similar a esto:<code>background:#333 url(bg_body.jpg) repeat-y center;</code>
Saludos.
markshock
chile sigo mareao con lo que has dicho.. jajaja ostia neeeeng!
hardface
Yeah! Thanx very muchhhhhhhhh!
chile·logela
ya, lo he corregido ahora se entiende un poco mejor.
hardface
Chile me has dejao el coco como una peonza tuneada... jjjiij... voy a por el lápiz y el cartabón a ver si lo saco.... jjiji
chile·logela
en ese layout yo veo 3 fondos.
el de página que es uno en el body, que sea el contenedor principal + la sombra exterior centrada + el color de fondo, que repita Y.
el del header que es un gif vertical de 1px de ancho y que repita X
y el otro que lo tienes que poner en un PNG alineado arriba, que no repita y el fondo de ese div tiene que ser del color del final de abajo de dicho fondo.
mexplicao? a estas horas lo dudo :D
nw
Para el radial cortalo donde acabe el degradado y ponlo de fondo del div con top right y no-repeat, luego le añades el color de fondo que sea para que complete el degradado.
hardface
yiaaaaaaah!!! marchando!
sole
Bueno pues ese lo pones fijo y mas ancho que un pixel :D
hardface
Cuenta que los gradients no son todos lineales, hay uno que es radial...
sole
Yo pondria el fondo de los divs que tienen gradiente con una imagen estrecha (1 o mas pixeles, a tu gusto) repitiendo en horizontal y luego un color de fondo por si se alarga.
No se si te sirve de mucho :D