miércoles, 4 de marzo de 2009

Esquinas redondeadas con CSS3

El borrador de CSS 3 especifica un atributo border-radius que más de uno habrá soñado alguna vez. Tener una capa o una tabla con esquinas redondeadas, que hasta ahora requería dibujar y recortar imagenes (o una hoja de estilo rebuscada y compleja) se resume ahora en una sola línea:
border-radius: 5px;
Pero el borrador de este nuevo estándar ya es implementado por cada buscador a su manera, como bien nos explican en el artículo sobre CSS 3 y border radius en xposible.

Esencialmente, para Mozilla tendremos que especificar:
-moz-border-radius: 5px;
Una diferencia en la implementación bastante incómoda.

Algunas notas sobre border-radius:
  • No conozco dos familias de navegadores que implementen este atributo de igual forma.
  • Internet Explorer y Opera no lo implementan.
  • En Mozilla -al menos- también se puede establecer mediante un porcentaje:
    -moz-border-radius-bottomleft: 100%;

    0% es una esquina sin redondear y 100% una esquina redondeada con radio la mitad del lado del objeto. El valor 200% se quedará en 100%. Por tanto un objeto de igual width y height y con el border-radius al 100%, es un círculo perfecto:
    -moz-border-radius: 100%;
    width: 300px;
    height: 300px;

    Supongo que es una forma de asegurarse que los bordes coincidan siempre, aunque la especificacón de CSS3 sobre border-radius establece un comportamiento mucho más interesante.
  • Para no complicarse la vida con CSS, uno puede complicársela y utilizar el redondeador de esquinas para JQuery.
Si te apetece jugar con otras propiedades aún no implementadas quizás quieras leer este artículo de Markus Stange (en inglés) que nos enseña a conseguir efectos muy interesantes con la propiedad box-shadow, -moz-box-shadow para Mozilla.

No hay comentarios: