Diseñorama » Articulos

Técnicas para redondear esquinas

Escrito por Kemie Guaida en 26.04.06

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.

• Este tutorial explica el principio muy claramente
• La teaser box de Roger Johansson usa la técnica sliding doors para permitir alto y ancho ajustables
• La caja flexible con bordes y esquinas transparente (del mismo autor)es mucho más flexible
• Bullet proof corners tiene ya todos los hacks necesarios para que funcione en todos los navegadores.

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.

3. 26 junio 2008, 01:33Saul

   Hola!
   Muy bueno tu sitio, fascinante.
   Una pregunta, como hago para introducir mis propios tipos de fuentes, como tu lo tienes hecho en tu sitio? por ejemplo: el h1 de los articulos.
   Gracias!!! Un millón

4. 10 agosto 2009, 19:06Gaston

   lastima que mucho te en ingle

5. 26 octubre 2009, 06:46karlito

   Este articulo esta muy bueno… es de gran ayuda

6. 6 febrero 2010, 19:00guille

   Lo andaba buscando, muy bueno el articulo lo probare en mi web.

---

¡Comenta!

Nombre:

Email:

URL:

Mensaje: