ervdesign.net

Digamos que si nuestro propósito es hacer un poco más suave, el diseño general de nuestra web, una buena idea es descargar nuestro diseño, de ángulos rectos. Vamos, hablando en plata, redondear alguna de nuestras esquinas, para hacer más agradable la experiencia web, si fuera necesario. Con esto no digo que un diseño sin curvas, no sea agradable, ni mucho menos, pero si el resultado final de un proyecto, nos parece demasiado duro o frío, redondear nuestras esquinas, puede sernos de gran ayuda.

Para ello, nos podemos servir de un montón de técnicas. Yo voy a enumerar y describir las que yo uso, que fueron sacadas en su momento, de dos de los libros que más recomiendo. En estos dos libros podemos encontrar técnicas avanzadas de CSS a nivel profesional, explicadas paso a paso y para las cuales no hace falta tener demasiada base. Comencemos.

El primer método que descubrí para redondear esquinas, utilizaba (y utiliza), CSS propietario, por lo que sinceramente es desaconsejable, pero el simple hecho de que el método en cuestión, funcionara para Mozilla y no para IE, me entusiasmó. Por mi parte, y creo que por la de muchos, si viviéramos en un mundo perfecto, el navegador sería Firefox, pero no es así, así que soluciones propietarias y no estandar como la que seguidamente vamos a ver, no son muy recomendables.

Este código propietario, no sólo engloba las esquinas redondas, sino que nos permite mostrar e incluir bastantes efectos, pero sólo a Mozilla, recuerda esto. Si queréis leer más, estos son los enlaces que yo conseguí en su momento:

xulplanet
Mozilla css commands

Veamos su funcionamiento. Supongamos que tenemos un div contenedor, al que queremos redondear la esquina superior izquierda, y la esquina inferior derecha, (en mozilla):

<div id="cont">
 
</div>

Veamos el CSS propietario para mozilla:

#cont {
width: 770px;
margin: 0 auto;
border: 5px solid red;
-moz-border-radius: 15px 0 15px 0;
}

A parte de ser un método desaconsejado por implementar código propietario, este método lleva implícito un problema si queremos poner alguna imagen de fondo, ya que la imagen saldría por detrás del borde.

La verdad es que, teniendo en cuenta que es una solución propietaria que también conlleva un problema como este, por lo menos a mi se me quitan las ganas de usarlo.

Comencemos a ver métodos más aconsejables, con estándares, claro.

<div class="caja">

<h2>Lorem Ipsum</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum pede
sed arcu.Donec lacus. Etiam pede. Aliquam erat volutpat. Morbi id quam sit amet
lorem mattis blandit. Integer bibendum nisl et sapien. Sed elementum, risus vitae
tincidunt vehicula, dolor magna ultrices mi, non malesuada orci nisl sed magna.
Morbi eu est at augue blandit gravida. Etiam semper rutrum elit. Vestibulum
nterdum varius massa. Phasellus pretium massa non magna. Curabitur at elit.
Suspendisse consequat leo quis nulla. Curabitur eu felis. Fusce laoreet varius
leo.</p>

<p>Nunc mauris. Suspendisse potenti. Etiam metus tellus, venenatis vel, porttitor
non, varius ac, nulla. Etiam congue hendrerit enim. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque eros.
Proin molestie. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Vestibulum cursus porta mi. Pellentesque nec
mi sit amet quam fringilla luctus. Praesent euismod purus quis tortor. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Suspendisse purus. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.</p>

</div>

Un marcado simple y normal, que nos sirve para montar sobre él, nuestro CSS para redondear las esquinas.

* {
  pading: 0;
  margin: 0;
}

body {
  font: normal 0.8em "Trebuchet MS", "Gill Sans", Futura;
  color: #666;
  background: #fff;
}

.caja {
  width: 418px;
  background: #effce7 url("bottom.gif") no-repeat left bottom;
  margin: 10px auto;
}

.caja h2 {
  background: url("top.gif") no-repeat left top;
  color: #469C11;
}

.caja h2 {
  padding: 10px 20px 0 20px;
}

.caja p {
  padding: 10px 20px 20px 20px;
}

Sin asustarse, que es muy sencillo. Hasta llegar a la clase .caja, en nuestro CSS no hay nada que resaltar. En la clase .caja, establecemos un width:, que será igual al ancho de nuestras 2 imágenes superior e inferior, en mi caso 418px. Separamos a .caja 10px de la parte superior, la centramos, (esto es completamente opcional), establecemos como fondo, la imagen inferior, que colocamos abajo a la izquierda y establecemos el color de fondo. Previamente hemos hecho coincidir este color con el de nuestras 2 imágenes.

La siguiente CSS nos dice que vamos a aplicar los estilos al título de segundo nivel que esté dentro de la clase .caja. Estos estilos son de lo más lógicos y sencillos. Aplicamos la imagen superior como fondo, colocándola en la parte superior, en la izquierda.

Seguidamente salvamos el padding para colocar nuestra imagen a la perfección, y finalizamos dando padding a los párrafos dentro de la clase .caja. Este es el ejemplo terminado, por si lo queréis ver en acción. Si os fijáis, al agrandar o disminuir el texto, nuestra caja, se expande perfectamente en altura.

Nuestro pasado ejemplo, da impresión de un fondo a base de masa. Seguidamente, vamos a lograr interpretar nuestras esquinas redondas, pero con un poco más de realce, digamos con un poco más de estilo, si se desea, claro. Para ello, nos vamos a basar en el mismo marcado que en el caso anterior salvo por el último párrafo, al cual implementamos el nombre de clase .last. Sólo esto diferencia el anterior marcado y el que vamos a utilizar, eso y que no vamos a utilizar 2 imágenes, sino 3, una para la parte superior, una en el centro que hará las veces de relleno, y una de cierre. Todas las imágenes las podéis pillar de los ejemplos o bajar el paquete entero, al final del artículo. Vamos a por nuestro nuevo CSS:

* {
pading: 0;
margin: 0;
}

body {
  font: normal 0.8em "Trebuchet MS", "Gill Sans", Futura;
  color: #666;
  background: #fff;
}

.caja {
  width: 424px;
  background: url("bg-tile.gif") repeat-y;
  margin: 10px auto;
}

.caja h2 {
  background: url("bg-top.gif") no-repeat left top;
  padding: 20px 0 0 0;
  color: #469C11;
}

.caja .last {
background: url("bg-bottom.gif") no-repeat left bottom;
padding: 0 10px 20px 20px;
}

.caja h2, .caja p {
  padding: 10px 20px 10px 20px;
}

Nuevamente llegamos a nuestras tan afamada clase .caja. En ella, volvemos a establecer el ancho exacto al ancho de nuestras imágenes, 424px. Establecemos como fondo la imagen que une la superior y la inferior, y la repetimos en sentido y. Nuevamente me separo de arriba y centro mi caja. En el siguiente paso aplicamos al título de segundo nivel, la imagen superior como fondo, poniéndola arriba a la izquierda. Con el padding salvamos la descolocación de la imagen. También le he agregado un color al texto.

Entramos a dar estilo a la clase .last dentro de nuestra clase .caja. A ésta, le aplicamos como fondo la imagen inferior, colocada a la izquierda abajo. También le aplicamos el correspondiente padding para salvar el desajuste. Tras esto, sólo nos queda aplicar padding al h2 dentro de .caja, y a los párrafos dentro también de .caja. Fácil, no me lo niegues.

Este tipo de estilos, da un montón de juego, no solo para esquinas redondas, sino para cuadrar cualquier estilo o diseño que tengamos pensado. Eso sí, estos ejemplos expanden su longitud verticalmente, y no a lo ancho, como veremos más adelante. Aquí tienes este último ejemplo.

Como último ejemplo, de los muchísimos que existen en la actualizad para redondear esquinas, voy a citar uno al que se refiere el libro que os recomendé antes, Profesional CSS. El ejemplo trata de emular las esquinas redondas de Blogger. A grandes rasgos, este ejemplo es más sencillo, pero la solución para IE requiere saber o tener algunos conocimientos de CSS más profundos de los que pensábamos. No es que sea para hacer una tesis, pero si que es necesario saber de que va el asunto, vamos a verlo, primero el marcado:

<div id="sidebar">
<div class="caja">
<h2>Lorem Ipsum</h2>
<p><q>At vero eos et accusam et justo duo dolores et ea rebum.</q>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
gubergren, no sea takimatasanctus est Lorem ipsum dolor sit amet.</p>

<p class="last">Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>

Una barra lateral, dentro nuestra caja, en ella un título de segundo nivel, un entrecomillado y… la clase .last. Creo que ya ya os imagináis por donde va el asunto. Vamos a utilizar 2 pseudoclases, :before y :after. Evidentemente, una implementará una imagen arriba y la otra abajo, hasta aquí todo normal, pero como comentaba antes, IE nos va a dar problemas, ya que no implementa esta 2 pseudoclases, pero la solución la veremos al final, veamos antes el CSS para navegadores de verdad.

* {
pading: 0;
margin: 0;
}

body {
font: normal 0.8em "Trebuchet MS", "Gill Sans", Futura;
color: #666;
background: #fff;
}

q {
font: normal 1.2em monospace;
}

p {
margin: 10px 5px 0 5px;
}

#sidebar {
width: 200px;
margin: 50px auto;
}

.caja {
background-color: #f5ece3;
border: 2px solid #e1d4c0;
padding: 8px;
}

.caja:before {
content: url("top.gif");
display: block;
line-height: 0.1;
margin: -10px -10px -22px -10px;
}

.caja:after {
clear: both;
content: url("bottom.gif");
display: block;
line-height: 0.1;
margin: 0 -10px -10px -10px;
}

.caja h2 {
margin-top: 0;
}

Comparando este CSS con los anteriores, vemos la clara diferencia entre implementar imágenes de fondo a los elementos y esta forma de crear contenido dentro del marcado con el css. La primera vez que me enfrenté a esta técnica, me costó asimilar que mi CSS creara contenido real dentro del marcado, es como si el CSS marcara por mi, y posteriormente, colocara ese contenido donde le indique yo. Me pareció genial. Salvando este novedoso tema, tenemos que prestar atención, al clear: both, y al line-height:. El primero borra cualquier rastro, y el segundo ajusta perfectamente nuestra imagen. No me cansaré de repetir que me parece una técnica genial. A primera vista, puede parecer algo difícil o complicado hacer coincidir el borde con la imagen para que casen, pero como veis, no lo es.

Ahora la solución para el de siempre.

.caja h2 {
background: transparent url("top.gif") no-repeat top left;
margin: -10px -10px auto -10px;
padding: 10px 10px 0 10px;
}

.caja > h2 {
background-image: none;
margin: 0 0 auto 0;
padding: 0;
}

Con las primeras especificaciones, aplicamos a IE un fondo transparente y una imagen, la cual colocamos con márgenes y relleno. Ahora nos encontramos con que tenemos 2 imágenes en navegadores normales, como Firefox, Opera o Safari, y tenemos que solucionarlo. Vamos a recordar el selector secundario, que en este caso nos viene de lujo. Con éste, devolvemos sólo a estos navegadores mencionados anteriormente, las directrices anteriormente marcadas, y sólo a estos, ya que ahora nos viene muy bien, que IE no implemente, tampoco, los selectores secundarios, gracias Bill. Esta última parte, es la que más genial me parece. Implementar a IE su propio marcado, para posteriormente marcar un CSS que no ve IE para devolver las cosas a su cauce normal, muy bueno. Aquí tenéis el ejemplo desarrollado, y aquí el paquete entero.

Escucha
este post

Etiquetado como: blog, CSS, design, esquinas, html, marcado, XHTML

Artículos relacionados

• Esquinas redondas con CSS, ancho variable (0)
• No más medallitis por favor (3)
• Los lectores de pantalla y el display: none (0)
• MRI: testea tus selectores (0)
• Menú con lista más css con efecto :hover (4)