recuadros redondeados en css

[wolfmoon]

Hola, haber si me podeis echar una mano, hasta ahora he visto como hacer recuadros redondeados partiendo de la imagen superior, central e inferior. Me gustaria saber como hacer lo mismo partiendo de las imagenes de la izquierda, centro y derecha y poder dar una altura a ese recuadro.

Muchas gracias

[Mikmoro]

A ver si te vale. El código es muy simple. Aunque no estoy seguro del todo de entender la pregunta.

http://www.araudi.net/esquinas_redondeadas.html

Mikel.

[andrewp]

Mira por donde, hoy justo estaba buscando lo mismo. Y buscando, buscando, encontré este link que lo explica muy bien. Es la misma técnica que te proporciona Mikmoro pero explicada paso a paso: ver aquí.

Saludos!

[Mikmoro]

Bueno, es muy parecida pero no es la misma. Yo uso un sólo gráfico posicionándolo en cada esquina, de manera que todas las cajas llaman a la misma imagen. Y no uso imágenes para los laterales rectos ni superior o inferior, sino el fondo del propio contenedor.

Da igual, porque las dos son igual de efectivas (igual una es mejor para una cosa y la otra para otra, supongo). Era sólo por resaltar que hay varias formas de hacerlo, y así uno puede buscar y elegir la que mejor le vaya.



Mikel.

[andrewp]

Vale la pena decir...

Si, algunas veces las imagenes que se usan son tan bajitas que no es necesario usar CSS.

[metacortex]

Iniciado por Mikmoro

Bueno, es muy parecida pero no es la misma. Yo uso un sólo gráfico posicionándolo en cada esquina, de manera que todas las cajas llaman a la misma imagen. Y no uso imágenes para los laterales rectos ni superior o inferior, sino el fondo del propio contenedor.

Igual hago yo. Si la esquina es (por ejemplo) de 16px se hace un gif de 32px y se posicionan los span.

Iniciado por Mikmoro

Da igual, porque las dos son igual de efectivas (igual una es mejor para una cosa y la otra para otra, supongo). Era sólo por resaltar que hay varias formas de hacerlo, y así uno puede buscar y elegir la que mejor le vaya.

En realidad no es igual. Sobre todo cuando tenemos cajas de distintos colores. 4 imágenes equivalen a 4 peticiones http.

En cualquier de los dos casos es bueno encerrar el contenido de la caja en un div, al cual posicionaremos relativo y asignaremos un z-index más alto. De lo contrario los span de las esquinas aparecerán encima.

[wolfmoon]

Gracias, al final he escogido la de mikmoro. Pero ahora tengo una duda, si lo que quisiera es hacer varios cuadros asi, como los posicionaria. Para daros una idea, quiero hacer algo parecido a esta pagina: www.andorra.ad, la parte donde pone prepara tu viaje, esta formada por varios recuadros, yo quisiera hacer eso. No se si de esta manera que dices se podria hacer eso?

[Mikmoro]

Si, claro. Es bastante sencillo, aunque hay que hacer algunos cambios en el código, como por ejemplo cambiar casi todos los "id" por "class", para que puedan ser usados varias veces sin ninguna variación. Mira un ejemplo:

http://www.araudi.net/esquinas_redondeadas2.html

Estúdiate un poco este código y cómo está pensado, y verás qué sencillo es hacer los cambios que necesites para adaptarlo a tu situación.

Si lo que quieres es imitar los cuadros del enlace que has puesto, tendrás que currártelo un poco más, aunque puedes utilizar el mismo concepto.

Mikel.