Weblog Stuff

Curvy Corners te permite crear esquinas redondeadas

Dic 18, 2008 - Autor: Hector Russo Diseño

Curvy Corners es un javascript, muy facil de usar que te permite crear esquinas redondeadas en cualquier etiqueta DIV de HTML.  No se necesita saber nada de gráficos, ya que este javascripts hace todo, hasta genera las esquinas redondeadas de fondos compuestos de imágenes.

Para utilizarlo lo instalamos en el directorio raiz de nuestro sitio o blog, en donde se encuentra el archivo index.html.  Una vez instalado, podemos generar las esquinas redondeadas incluyendo el siguiente código en la etiqueta head del HTML:

<script type=”text/JavaScript” src=”rounded_corners.js”></script>

Luego creamos un elemento DIV, con un id, como en el siguiente caso:

<DIV id=”myDiv”></DIV>

Curvy Corners tomará la información de estilo directamente del contenido del elemento DIV.  Por último debemos incluir los parámetros necesarios para crear las esquinas redondeadas y por ejemplo si queremos que estas tengan un radio de 30 pixels, incluimos este código en el head:

  window.onload = function()
  {
    settings = {
      tl: { radius: 30 },
      tr: { radius: 30 },
      bl: { radius: 30 },
      br: { radius: 30 },
      antiAlias: true,
      autoPad: false
    }

    var divObj = document.getElementById(”myDiv”);

    var cornersObj = new curvyCorners(settings, divObj);
    cornersObj.applyCornersToAll();
  }

</script>