Diseño web | Creación web | Emenia

Utilizando CSS3 hoy (1): Bordes Redondeados

Acabo de leer el libro de Dan Cederholm Handcrafted CSS, que me ha parecido muy bueno. En general el libro gira sobre dos ideas:

- Siempre hay que preguntarse cuando se desarrolla una web ¿qué pasaría si…? para estar preparado ante cualquier circunstancia que pueda alterar los distintos componentes de la web y hacerlos distintos a como nosotros los habíamos previsto (por ejemplo incrementando el tamaño del texto). Eso lo llama “web a prueba de balas” y “desarrollo artesano”, es decir, con atención al detalle.

- La idea de que no tiene por qué verse igual nuestra web en todos los navegadores. Dan Cederholm reivindica que se utilice ya CSS3, soportado por los navegadores más nuevos (en ocasiones sólo por Safari, Chrome y Firefox, e incluso sólo por Safari), siempre que no afecte a la usabilidad y accesibilidad del sitio cuando se vea con otro navegador que no soporte CSS3 (básicamente Internet Explorer). Es decir, que bajo IE6 se pueda usar y leer perfectamente nuestra web, aunque no sea tan “bonita” como cuando se usa un navegador moderno. Pero claro, para tomar una decisión como esta antes hay que conocer qué porcentaje de nuestros usuarios utilizan IE6, por ejemplo, y luego decidir si estamos dispuestos a que vean una web “más fea” siendo un porcentaje de usuarios alto los que lo usan…

Aprovechando esta última idea voy a empezar a hablar sobre las novedades más importantes que, aparte de los selectores, aporta CSS3 y que podemos empezar a utilizar ya en nuestros diseños (teniendo en cuenta que no se verán en algunos navegadores). Para no hacer muy largo el artículo voy a ir desgranando cada novedad en artículos diferentes. Hoy empezaré con los bordes redondeados, probablemente la novedad más conocida.

Bordes Redondeados

Si hasta ahora teníamos que utilizar imágenes para obtener bordes redondos en nuestros diseños ahora estos se pueden conseguir gracias a CSS3. Para ello aplicamos al elemento al que le queremos redondear los bordes la propiedad border-radius.

Sin embargo esta propiedad aún no está recogida tal cual por los navegadores. Internet Explorer no lo recoge en ninguna de sus versiones (lo han prometido para Internet Explorer 9). Sí está recogida en cambio por Safari y Chrome (utilizando el prefijo-webkit-) y por Firefox (utilizando el prefijo -moz-).

Vamos a poner un ejemplo. Supongamos que tenemos un DIV de 100px de ancho y 100px de alto con color de fondo rojo que queremos que tenga unas esquinas redondas con un radio de 10px:

1
2
3
4
5
6
7

div.cuadro {
    width: 100px;
    height: 100px;
    background-color: red;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

El resultado sería este:



Podemos redondear incluso algunas esquinas y otras no, desplegando la propiedad en todas sus esquinas. Por ejemplo, si queremos que sea redonda sólo la esquina superior derecha:

1
2
3
4
5
6
7

div.cuadro {
   width: 100px;
   height: 100px;
   background-color: red;
   -moz-border-radius-topright: 10px;
   -webkit-border-top-right-radius: 10px;
}

El resultado sería:

En el caso de alterar varias esquinas, pero no todas, podemos abreviar:

1
2
3
4
5
6
7

div.cuadro {
   width: 100px;
   height: 100px;
   background-color: red;
   -moz-border-radius: 10px 10px 0px 0px;
   -webkit-border-radius: 10px 10px 0px 0px;
}

Vemos como hay una ligera diferencia entre la expresión de webkit (Safari y Chrome) y la de Mozilla (Firefox). Aquí tenemos un detalle de todas ellas:

Yo suelo utilizar border-radius mucho en los formularios, para redondear las casillas del mismo. ¿Que en Internet Explorer se ven cuadradas? No pasa nada, no afecta al formulario. Vamos a verlo:

1
2
3
4
5
6
7
8

<form action="#" method="post">
  <fieldset>
    <p><label for="nombre">Nombre:</label><input type="text" name="nombre"  /></p>
    <p><label for="email">Email:</label><input type="text" name="email" value="" /></p>
    <p><label for="comentarios">Comentarios:</label><textarea name="comentarios"></textarea></p>
    <input type="submit" value="Enviar" class="boton" />
  </fieldset>
</form>

Y aplicando estos estilos:

1
2
3
4
5
6
7
8
9

p     		{ padding: 5px; }
label 	{ display: block;}
input,
textarea	{ width: 200px;
		   -webkit-border-radius: 8px;
		   -moz-border-radius: 8px;
		  border: 1px solid #BDC2C9;
		 }
input.boton	{  width: 70px;}

Quedaría:

Vemos que hemos redondeado los bordes de los elementos. En internet Explorer 8 se vería así:

Como se ve todo aparece sin problemas en Internet Explorer. Los bordes no aparecen redondeados, pero no supone ningún problema para el uso del formulario. Lo único que estamos haciendo es ofrecer diseños más avanzados a aquellos usuarios que utilizan navegadores más modernos, pero sin afectar a la usabilidad y accesibilidad de la web.

Seguiremos en breve con otra propiedad de CSS3, los colores utilizando RGBA.

Lecturas recomendadas

BuildInternet, Using Rounded Corners with CSS3
Smashing Magazine, CSS 3 Cheat Sheet (PDF)
Elliotswan, 9 CSS3 properties you can use now
CSS3.info, CSS3 Previews