CSS o imagenes?

samy4ever · #1 (**permalink**) 30/12/2008, 12:11

Hola!

Estaba mirando la página que estoy haciendo, que acabo de empezarla hace poquito y voy haciendo (http://tecnotortest.site50.net), y estaba pensando en cómo hacer el "container" menos definido. Es decir, se ve un rectángulo demasiado bien hecho y me gustaría que estubiera un poco difuminado... Más o menos como la siguiente imagen:

http://img140.imageshack.us/img140/2778/difzj1.jpg

Cómo podría hacerlo? Es con CSS, o con imágenes?? Yo de photoshop (y similares) tengo muy poca idea, menos aún que CSS... jejeje Alguien me puede guiar que tengo que mirarme para hacer algo así? :)

Muchas gracias!

kseso? · #2 (**permalink**) 30/12/2008, 12:37

Hola Samy
Esa "sombra" estará realizada seguramente con un archivo .png que admite máscaras y transparencias.
Pero si usas ese tipo de imágenes, tienes que ser consciente de que ie6 no las maneja. Muestra un borde de un color desagradable. Hay métodos para solucionarlo.

samy4ever · #3 (**permalink**) 30/12/2008, 12:51

Y existe alguna alternativa para suavizar un poco los bordes que no sea con imágenes, o si pero sencillo?

kseso? · #4 (**permalink**) 30/12/2008, 12:56

Forma milagrosa no hay, Samy.
O utilizas un programa de edición de imágenes (Gimp, Ps, Corel PhotoP...) para hacer los png´s según los necesites, o incorporas a los .jpg esa transición de degradado.

samy4ever · #5 (**permalink**) 30/12/2008, 13:03

Oks, gracias!

Mikmoro · #6 (**permalink**) 30/12/2008, 16:16

Mira: esto es una sombra simulada con CSS y sin imágenes

http://www.araudi.net/ejemplos/caja_...in_imagen.html

Mira a ver si entiendes cómo está hecho. En tu caso sería más sencillo, orque neceita menos cajas.

kseso? · #7 (**permalink**) 30/12/2008, 16:22

¡Menos mal que sólo necesitaste 9 tonos de gris, si llegan a ser los 256 !

¿divitis en momentos de ociosidad?

Mikmoro · #8 (**permalink**) 30/12/2008, 16:25

Cita:

Iniciado por kseso?

¿divitis en momentos de ociosidad?

Más bien la palabra mágica: RETO

Tiene divitis aguda pero está ingenioso ¿no?

samy4ever · #9 (**permalink**) 30/12/2008, 17:17

Parece muy interesante y sin demasiadas complicaciones para hacerlo. En un rato/mañana me lo miraré para ponerlo yo tambien :)

Ahora estaba mirando lo de las esquinas redondas sin imágenes (algun día tendré que hacer un curso de photoshop/gimp o lo que sea...)

Curioso que les cueste implementarlo, pero bueno, para quien quiera saberlo tambien, he encontrado una solución para algunos navegadores (solo algunos) en el siguiente link:

http://www.zonafirefox.net/2007/01/probando-los-bordes-redondeados-en.html

Gracias por vuestros comentarios y aportaciones!

PS: A ver si llego a los puñeteros 30 posts y puedo poner links sin problemas ¬¬'

Aresillo · #10 (**permalink**) 01/01/2009, 13:55

Madre mía Mik!
Vaya currelo!! aunque cuanto menos curioso...

Aresillo!!

samy4ever · #11 (**permalink**) 01/01/2009, 16:43

Por cierto, la información de la página que estoy haciendo va a estar en cajitas con sombra como la tuya! Una muestra: http://tecnotortest.site50.net ;);)

Gracias!

Mikmoro · #12 (**permalink**) 01/01/2009, 17:50

Al estar sobre negro más que sombra parece un poco 3D, ¿no?

kseso? · #13 (**permalink**) 01/01/2009, 18:36

Y además creo que tienes un problema de codificación:

Cita:

Aqu� ir� la info general ... a�adir footer

samy4ever · #14 (**permalink**) 01/01/2009, 20:24

@kseso: Si si, la codificación tengo que ponerlo aún, de momento solo está puesto para que no me olvide de las cosas :P

@mikmoro: sip, tengo que retocarlo, o hacer la sombra más oscuro o en vez de ir hacia el blanco ir hacia el negro. Aún no me he decidido por alguna de las dos opciones:P!

Gracias por los comentarios desinteresados! :)