Crearemos un diseño de bordes nítidos y esquinas redondeadas usando CSS, evitando el uso de tablas.
Este documento pretende:
- Crear
un diseño de bordes nítidos y esquinas redondeadas usando CSS,
evitando el uso de tablas. - Que el código del CSS
y el XHTML
sea validado por la W3C y
que además sea semánticamente lógico. - Que el diseño sea totalmente fluido o sea que se adapte a cualquier
resolución del usuario. - Compatible con la mayoría de los navegadores.
Los
requisitos para dominar cada uno de estos pasos son los siguientes:
- Saber
crear un documento XHTML bien
estructurado. -
Saber aplicar CSS a documentos
XHTML usando clases.
Primero que nada vamos a crear la imagen inicial de nuestro borde y sus esquinas.
Debes saber manejar algún programa de diseño como Adobe
Photoshop, Macromedia
Fireworks o Paint Shop Pro. La siguiente
imagen te dará una idea más amplia de este proceso. Además
la puedas usar como ejemplo para que practiques este tutorial.
Antes de continuar con el código necesitamos cortar la imagen. Parte
del efecto se debe a la forma en que cortamos la imagen y como se posicionan
estos pedazos utilizando cierto código de CSS.
La imagen debe ser cortada en 8 partes:
| Esquina inferior izquierda: |
 |
| Esquina inferior derecha: |
 |
| Esquina superior izquierda: |
 |
| Esquina superior derecha: |
 |
| Borde inferior: |
 |
| Borde superior: |
 |
| Borde izquierdo: |
 |
| Borde derecho: |
 |
Ya tenemos todo lo necesario para crear el efecto. Veamos ahora el código
al cual le vamos aplicar la decoración.
Código
XHTML:
<h1>Título del artículo.</h1>
<p>Párrafo de prueba #1. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p>
<p>Párrafo de prueba #2. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p>
<p>Párrafo de prueba #3. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p>
<p>Pie del artículo
<br />
Autor, fecha, referencias, etc.</p>
Para
lograr lo que queremos necesitamos añadir unas capas o "layers" usando la etiqueta <div>.
Estas capas irán alrededor del código XHTML .
Código
XHTML:
<div id="top"></div>
<div id="content">
<div id="box_control">
<h1>Título del artículo.</h1>
<p>Párrafo de prueba #1. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo.</p>
<p>Párrafo de prueba #2. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo.</p>
<p>Párrafo de prueba #3. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p>
<p>Pie del artículo<br />Autor, fecha, referencias, etc.</p>
</div>
</div>
<div id="bottom"></div>
Hasta
ahora no hemos hecho nada complicado. Hemos creado un documento en XHTML muy bien estructurado. Tan fácil que hasta un niño pudiera hacerlo.
El próximo paso será colocar las imágenes que hará esquina dentro de las capas que hemos creado. Empecemos por la parte superior.
Código
XHTML:
<div id="top">
<img src="top_left.gif" alt="Esquina superior izquierda" />
<img src="top_right.gif" alt="Esquina superior derecha" />
</div> Ahora añadiremos las imágenes correspondientes a la capa inferior. <div id="bottom">
<img src="btm_left.gif" alt="Esquina fondo izquierda" />
<img src="btm_right.gif" alt="Esquina fondo derecha" />
</div>
Llegó el momento de aplicar el lenguaje de CSS
a nuestro documento. Vamos a continuar aplicando ciertas reglas de CSS
a nuestra capa superior.
Código
XHTML:
<div id="top" class="top">
<img src="top_left.gif" alt="Esquina superior izquierda" class="esquina_sup_izq" />
<img src="top_right.gif" alt="Esquina superior derecha" class="esquina_sup_der" />
</div>
Código
CSS:
div.top {
/* La altura es de 28 píxeles ya que ese es el espacio que ocupa
nuestra imagen de esquina. */
height:28px;
background-image:url(top_line.gif);
background-repeat: repeat-x; }
img.esquina_sup_izq { float:left; }
img.esquina_sup_der { float:right; }
Ahora
prácticamente escribiremos las mismas reglas para la capa inferior solo
que cambiaremos el nombre de las clases. Además en la regla background-image:url(btm_line.gif);
debemos colocar la imagen correcta.
Código
XHTML:
<div id="bottom" class="bottom">
<img src="top_left.gif" alt="Esquina inferior izquierda" class="esquina_inf_izq" />
<img src="top_right.gif" alt="Esquina inferior derecha" class="esquina_inf_der" />
</div>
Código
CSS:
div.bottom {
height:28px;
background-image:url(btm_line.gif);
background-repeat: repeat-x; }
img.esquina_inf_izq { float:left; }
img.esquina_inf_der { float:right; }
Aaaaaaaaah!
Ya esta tomando forma nuestra pequeña obra de arte. En menos de lo que
te imaginas habremos terminado todo. Es bueno que entendamos todo lo que hemos
hecho hasta ahora. Usando background-image:url(fuente_de_origen);
hemos invocado la imagen que forman el borde superior e inferior. Con background-repeat:repeat-x;
nos aseguramos que la imagen se repita rellenando todo el espacio necesario
para lograr el efecto de una imagen completa. Y con la regla float:xxx;
obligamos a que cada imagen ocupe su esquina pertinente.
En
siguiente paso codificaremos las reglas que darán forma a nuestro contenido.
Código
XHTML:
<div id="content" class="content">
Código
CSS:
div.content {
background-image:url(left_line.gif);
background-repeat:repeat-y; }
¿Para
que es el Box Control? (<div id="boxcontrol">)
Esta capa nos ayudara a tener más control de la posición de nuestro
contenido. Además podremos manejar fácilmente los atributos como
el padding o el border que muchas veces nos causan dolor de cabeza cuando queremos
formatear el contenido. Y para dejarte con la curiosidad si utilizas selectores
contextuales en tu CSS las posibilidades de controlar la presentación visual del contenido son
innumerables. Para efectos de este tutorial la función principal será la de crear el efecto del borde a la derecha.
Código
XHTML:
<div id="boxcontrol"
class="boxcontrol">
Código
CSS:
div.boxcontrol {
padding:0 5% 0 5%;
background-image:url(right_line.gif);
background-position:right;
background-repeat:repeat-y; }
¿Pero
que pasó? ¿Y esos odiosos espacios en blanco? Aún tenemos
que hacer algunos retoques para que tengamos todo funcionando perfectamente.
Estos espacios en blanco a un conflicto que causan las etiquetas de tipo block
como h1, h2, h3, p, etc., con algunos atributos dentro del Box Model de CSS.
Explicar porque ocurre esto sería escribir otro artículo. En este
tutorial nos enfocaremos en como solucionar lo del espacio en blanco.
Para
que todo funcione como Dios manda añadiremos esta regla a la capa superior.
Código
CSS:
div.top {
height:28px;
background-image:url(top_line.gif);
background-repeat: repeat-x;
margin:2em 0 0 0;}
Ahora
editamos la etiqueta de encabezado. Así evitamos la horrible línea
blanca superior.
h1 {
margin:0;
/* Solo para decoración, no tiene nada que ver con la solución
al espacio en blanco */
border-bottom:1px dashed #996;}
Para
desaparecer la línea inferior añadiremos la siguiente clase, class="autor",
a la etiqueta <p>, donde
se encuentra la información del autor.
Código
XHTML:
<p class="autor">Pie
del artículo<br />Autor, fecha, referencias, etc.</p>
Código
CSS:
p.autor {
margin:-.1em 0 0 0;
/* Solo para decoración no tiene nada que ver con la solución
al espacio en blanco */
padding-right:8px;
border-right:1px dashed #996;
text-align:right;}
Como último detalle debemos colorear el area del contenido con el color de
fondo de nuestra imagen.
Código
CSS:
div.content {
background-image:url(left_line.gif);
background-repeat:repeat-y;
background-color: #a9d974; }
Nota: El Internet Explorer 5 ó 5.5 no posiciona correctamente las imágenes
de las esquinas. Para lograr la compatibilidad con IE 5 ó IE 5.5 necesitamos
añadir unas cuantas reglas a nuestra hoja de estilo. Estas reglas forman
parte del Simplified Box Model Hack para IE. El SBMH es una técnica muy
utilizada para corregir la implementación incorrecta del CSS en
IE. Hablar sobre esto nos tomaría otro artículo así que
por ahora solo te mostraré donde utilizar esta técnica en nuestra
hoja de estilo.
Para
implementar esta técnica añadiremos las siguientes reglas a nuestra
hoja de estilo.
Código
CSS:
/* Simplified box model hack para
posicionar correctamente las imagenes de esquina. */
* html img.esquina_sup_izq, * html img.esquina_inf_izq { \margin-left:-.2em;
ma\rgin-left:0; }
img.esquina_inf_der, img.esquina_sup_der { margin-left:.2em; }
¿Listo
para gran el final?
Fácil!
Con solo 4 capas, 8 imágenes de menos de 1 KB y utilizando CSS hemos cambiado radicalmente la presentación visual del contenido de nuestro
ejemplo. Ten la libertad de experimentar con este código y de crear tus
propios efectos. Como mencioné arriba, si aprendemos a manejar correctamente
las hojas de estilo, las formas de expresar la presentación visual del
contenido de nuestros documentos webs son innumerables.
Archivo
zip (Incluye el documento XHTML ,
la hoja de estilo (CSS) y los
gráficos utilizados.)
Referencias:
muchisimas gracias
El objetivo de llegar a usar css y xhtml debe ser alcanzar la accesibilidad. Por lo que los bordes presentados en este artículo presentan el problema de que un programa que asista a un invidente se imaginara hasta los bordes…que no es el objetivo de la accesibilidad. La accesibilidad no debe decir border, raya, puntos, cuadros… debe permitirle al usuario leer el contenido. Los alts de las esquinas haran que se oiga “Esquina superior izquierda”. El CSS debe permitir que la administración de la capa de diseño sea menor, asi que con unos divs, y los mismos 8 gifs se puede llegar a algo más administrable.
Tu nota y el código son excelentes, solo que en los navegadores de Mozilla y en Opera no funciona. Lo puedes ver añadiendo algunos parrafos al contenido. Estaré trabajando sobre eso en estos días. Tan pronto averigues alguna solucion me gustaría saberla. Mil gracias por la aportación
Muy bueno, gracias por compartirlo
Muy bien explicado y planteado. :arriba:
Pero no acabo de ver que ventajas tiene respecto al uso de tablas, :pensando: de entrada diría que es más complicado que generar una tabla con las mismas imágenes, como fondos de las celdas, para que al insertar texto se adapten los tamaños de los bordes.
Considero que las hoja de estilo en cascada puede reducirse en algunos bytes su tamaño a traves del uso de “abreviaturas”, por ejemplo:
Puede reducirse a lo siguiente:
La reducción que he hecho en el relleno es válida siempre y cuando el relleno superior e inferior sea igual, mientras que el relleno izquierdo sea igual al derecho.
Espero sirva de algo…
Milton Mazzarri
Yo creo que hay que informarse un poco mas antes de intentar ayudar con tutoriales o algo asi, ya que al final solo confunden mas a la gente que esta aprendiendo.
es esta y fue desarrollada por http://www.redmelon.net/tstme/4corners/
y esta probado en diferentes tipo de navegadores sin problemas.
Saludos.
Creo que la diferencia de peso entre las tablas y las cascadas no es mucho, pero la ventaja es que se pueden aplicar con más facilidad sobre el contenido dinámico, además es más práctico a la hora de modificar (cuando se tienen muchos cuadros). Sin embargo, si se va a usar poco, creo que las tablas estarían bien.
Jaime, me encanto tu árticulo, la verdad que no he experimentado, ni sé absolutamente nada de xhtml, pero con éste árticulo tuyo me interesó el tema, ya que estoy tratando de hacer cambios a mi web, y creo que ésta es la solución a mi problema, y tratar de no utilizar tablas, que siempre se desfiguran, y también estoy aprendiendo CSS. Gracias por el árticulo, está muy bueno.
Claudio González Soto
Asesor Nutricional
http://www.mipesoideal.com
[email protected]
// http://www.trabajohbl.com //
Bueno el TRcuo, me ayudo mucho, y ahora soy un fanatico de el.
// http://notengo.cl //
en todo caso, la diferencia de usar CSS con respecto a tablas que yo usé mucho es basicamente respecto a la mayor cantidad de opciones, asi como el notable posicionamiento absoluto y superposicion definida, pues imagina que insertes una imagen que sea mayor a tu ancho definido, el solapamiento provocara una deformacion en tu pagina, y si tienes mas elementos o mas tablas, todos variaran, en si tu contenido se iria al tacho al igual que la estructura, el solapamiento puede ser disimulado o manipulado con el CSS.
bueno el tutorial!… los css no solo se usan por el peso, se usan por mantenimiento, poder, portabilidad, etc… las tablas NUNCA estan bien, salvo tu sitio sea de una hoja y no piensen modificarla nunca.
este ejemplo no tiene caso si a final de cuentas las esquinas son ancladas en el HTML y no en el CSS, mejor tablas, da lo mismo.
La manera correcta es poder manipular las esquinas redondas totalmente desde un CSS.
hola a todos que interesante
Opino que esto fue muy muy interesante.
Les propongo un nuevo tema que es bastante específico. Se trata de la etiquta DIV en particular, profundizar en ella como tal, en su forma de usarse, qué se puede lograr con ella, etc.
Saludos y de verdad que este curso estuvo bien interesante. Por lo menos a mi me sirvió de mucho
Antes dar las gracias a Jaime por el artículo.
Estoy haciendo un cuadro con esquinas redondeadas siguiendo este artículo. El cuadro lo he diseñado en el Photoshop pero no consigo que el .gif tenga la calidad que tiene el del ejemplo. Se ve muy “cuarteado/pixelado”. Os agradecería que me indicarais con qué programa habeis hecho los .gif y qué propiedades tiene.
Muchas gracias.
Jesús del Aguila.
Me gustaría saber qué tengo que modificar en este código para que la altura del cuadro se mantenga siempre fija y si escribo más texto del que cabe dentro este texto sobrante desaparezca y se mantenga el borde del cuadro.
Saludos y gracias.
Lo mínimo después del curro que te has dado es darte las gracias. Si la gente hiciera lo mismo (compartir y sobretodo explicarlo) con su código seguramente veriamos mucha evolución en muy poco tiempo.
Nuevamente te agradezco tu explicación.
Saludos.
Muy buen articulooooooooo!!!!! con estoy le voy a decir chau a las tablas 😛
Yo no tengo mucha idea de esto, que por eso mismo he llegado aquí buscando ayuda, pero creo que otros comentarios en el mismo sentido tienen razón en que las imágenes tienen que formar parte dek css y no del xhtml
FELICIDADES!! Excelentemente explicado, es usted un genio.
[…] Creando esquinas redondeadas usando CSS en Maestros del Web […]
Exelente articulo, muchas gracias por compartir tus conocimientos,
este articulo me parecio excelente
Es bastante malo. Se puede hacer sin tener que recortar imagenes. Una cagada, ni más ni menos.
Andres, si te parece bastante malo y una cagada, por que no pones un tutorial tu o nos enseñas como se hace sin recortar las imagenes, me gustaria saber.
Pero no creo que diciendo “es una cagada, ni mas ni menos” estes ayudando a nadie.
Asi que estaria bueno que pongas algo que nos sirve y no que te frustres y ofendas al autor del sitio.
Gracias por el tutorial, tal vez a Andres no, pero a mi me sirvio muchisimo.
.-¿Cómo podría aplicar esquinas redondeadas al main-wrapper y a la sidebar de mi blog…?
.-Gracias.
Hola! muy bueno este artículo, me sirvió para aprender lo que hasta ahora pensé que se hacía con tablas e imágenes. Ahora tengo una consulta de algo que no me queda claro: ¿por qué si no aplicamos la class “autor” al pie del artículo nos queda un espacio en blanco entre la bottom y la de contenido?
Parece una pavada, pero no entiendo por qué una clase aplicada a un texto soluciona el inconveniente del diseño, siendo que lo sube unos pixeles nomás, y al texto, no la div.
Saludos
Es el instructivo mas práctico, cencillo e instructivo y, ademas, con los códigos y las imágenes disponible, que haya visto jamás, sobre esquinas redondeadas. He visto otros, pero este va paso a paso y lo convierte por lo tanto en un instructivo al 100 por 100
jajaja es gracioso ver como se hacia hace unos 6 años… que bueno q en ese tiempo aun estaba muy pequeño, gracias a dios ahora ya existe el css2 y css3 que facilita todo sin tener que usar imagenes… no se si tenga caso responderle a andybel xD ya paso mucho tiempo
Es muy bueno, pero alguien sabe como hacerlo con fondos de otro color.