Josedelcorral.es

Maquetar esquinas redondeadas con sombras y degradados

Seguro que más de uno habrá escuchado alguna vez eso de “Dale una vuelta, métele esquinas redondeadas y un par de degradados y quedará mucho más 2.0”

En esta nueva era de la web, parece que está de moda hacerlo todo mucho más “visualmente atractivo”, los clientes se olvidan completamente del trabajo de los diseñadores y algunos diseñadores dejan fluir su imaginación y se olvidan completamente de los maquetadores, cuanto más dospuntocerista sea tu diseño mejor.

Ale Muñoz definió un nuevo tag XHTML para cuando nos encontráramos con alguna de estas locas propuestas de los clientes, el CWT (Client Want This) y expresa claramente el ejemplo del que voy a hablar en este post.

Las esquinas redondeadas en un diseño son ya algo normal, maquetarlas se puede hacer de forma sencilla usando alguna técnica como la Slinding Doors, de esta forma lograrás tener un contenedor elástico con bordes redondeados, perfecto!

Pero como esto no es lo suficientemente cool vamos a darle una vuelta de tuerca, las esquinas redondeadas pasan ahora a tener tres o cuatro niveles de sombreados grises tanto en sus bordes horizontales como en los verticales, es decir, más o menos esto:

Mamuso (al cual le tengo que agradecer este post que estoy escribiendo) me dice siempre: “No hay diseños imposibles sino maquetadores sin recursos” , así que vamos a ver como podríamos resolver esta pequeña putadita:

Necesitaremos 6 elementos HTML para definir la estructura, si la caja lleva título podemos usar uno de ellos como encabezado (h2 por ejemplo), de lo contrario necesitamos 6 DIVs, uno para cada esquina y dos para los bordes de los lados ( que deberán crecer a la misma velocidad que crezca el texto):

 El código HTML sería algo así como: 

Usaremos un div “header“  y un h2 para la parte de la cabecera (usando el método de Sliding Doors), dos divs uno dentro del otro,  “center_content” e “inner_content”,  para representar los bordes sombreados de la caja y otros dos divs, “footer” y “footer_content“  para la parte del pie.

Ya tenemos la parte fácil, ahora vamos a la CSS:

Tanto la parte del header como la del footer están hechas con la técnica de Sliding Doors que mencionamos antes, es decir, dos imágenes, una muy larga que representa la esquina izquierda y el borde , y la otra que representa la esquina derecha:

Para la parte central utilizaremos dos imágenes, con el borde sombreado justo que usaremos de fondo posicionadas a izquierda y derecha con un repeat-y.

Para que los bordes queden superpuestos en los dos contenedores centrales, debemos de darle un margen negativo de 2px al contenedor interior, de lo contrario los bordes no encajarían ( esto NO habría que hacerlo para IE6).

El resultado es una estructura TOTALMENTE COMPATIBLE con todos los navegadores de uso cotidiano, ELÁSTICA y sobre la que se puede hacer ZOOM (ya que está maquetada con ems).

Y esto es todo amigos, no se si el resultado ha quedado muy claro (entre otras son las tantas de la mañana) pero todo es cuestión de probarlo y a ver que tal :)