.

Diseñorama » Articulos

Técnicas para redondear esquinas

Escrito por Kemie Guaida en 26.04.06

La versión actual de CSS solo nos permite tener esquinas cuadradas y aburridas. Las especificaciones de CSS3 tienen contempladas las esquinas redondeadas, pero mientras tanto ¿cómo lograrlas con CSS? Aquí van varias técnicas que pueden ser útiles.

CSS puro

La propiedad border

En las especificaciones de CSS3 para los bordes, está la propiedad border-radius, en la que se puede definir el radio del "redondeo" de las esquinas individualmente

Ventajas

Usa solamente css, no requiere imágenes, scripts, o marcaje extra. Permite definir radios diferentes para cada esquina

Desventajas

Aun no está finalizado, pasará mucho tiempo antes de que todos los navegadores lo adopten

Los navegadores gecko (mozilla, firefox, camino), soportan la propiedad moz-border-radius. La última versión de Safari soporta -border-radius.

Contenido Generado

En esta técnica, se usa content:, :before y :after para introducir imágenes para crear las esquinas

Ventajas

A pesar de que usa imágenes, todo se controla a través de CSS. No se necesita ningún html extra.

Desventajas

Algunos navegadores, notablemente Internet Explorer, no soportan los selectores :before y :after o la propiedad content:. Se deben de hacer 4 imagenes para cada color de esquina

Elementos coloreados

Krazy Korners utiliza varios elementos <b>, de 1x1 pixel y con un color de fondo, para crear las esquinas. Snazzy Borders usa el mismo principio, pero permite poner bordes al contenedor.

Ventajas

Todo se controla a través de CSS. No hay que hacer imagenes.

Desventajas

El código muchas veces es más grande que lo que serían las imagenes. Introduce elementos innecesarios en el código

Javascript

Existen varias opciones para redondear esquinas usando javascript:

  • Nifty Corners Cube- la solución más popular
  • Rico- esta librería de efectos en js, te permite redondear esquinas también
  • Mochikit- otra librería que incluye efectos para esquinas
  • Octopus- una librería de efectos visuales
    • Ventajas

      Generalmente no requieren marcaje extra. Suelen ser compatibles en la mayoría de los navegadores sin hacks.

      Desventajas

      Requieren que el usuario tenga habilitado js (aunque todas son no-obtrusivas). Mezclan la presentación con el comportamiento.

      Imagenes

      Para esta técnica se usan 4 imágenes (una para cada esquina) posicionadas en las 4 esquinas del contenedor.

      Ventajas

      Es la técnica más sencilla de entender. No requiere muchas complicaciones.

      Desventajas

      Introduce elementos de presentación en el código. Se necesita cambiar el html para cambiar el aspecto.

      Imagenes de fondo

      La solución más completa, más flexible y menos intrusiva, tiene mil y un variantes, pero el principio es usar imagenes de fondo en varios elementos para crear las esquinas.

      Ventajas

      Controlas la presentación desde CSS, sin introducir elementos img. Es flexible y no requiere de scripts.

      Desventajas

      Las técnicas suelen usar marcaje (html) extra, aunque muchas técnicas se pueden adaptar para usar el marcaje que ya tienes. Tienes que generar una images (o varias) para cada estilo/color que necesites

      Conclusiones

      ¿Cuál es la mejor técnica? Como siempre la respuesta es "depende". Depende del soporte que quieras dar a navegadores, los efectos que quieras lograr.

      Personalmente, la técnica de esquinas y bordes de 456beres atreet me parece la más sencilla, flexible y limpia.


      Comentarios

      1. 1 mayo 2006, 20:53Webtaller

        buen sitio

      2. 21 febrero 2007, 15:38Ahoraescuando

        Muy buen artículo, si bien existen otras formas más, creo que resume las más importantes.
        Felicidades y sigue adelante con tan buenos artículos.
        Saludos.


      ¡Comenta!

lista de correo

Suscríbete a la lista de correo y mantente informado sobre las actualizaciones del sitio.


Suscríbete

rss ATOM
RSS
RSS noticias
RSS articulos
RSS tutoriales


¿Sugerencias?

¿Quieres compartir una noticia o enlace? ¿Sugerir un tema para un artículo? Hazlo aquí: