softrRounded es una ligera librería(1.5kb) que gracias a Google y a MooTools permite generar diversos tipos de esquinas redondeadas de manera rápida y sencilla.

Requerimientos:

• Mootools 1.11 (core, class, native, element, window)
• Google groups beta

Compatibilidad:

• Se ha probado en Mozilla Firefox e Internet Explorer 6

Descarga:

• softrRounded 0.1 (librería, MooTools y ejemplos) - 22kb
  

Instalación y uso:

1. Copiar la librería softrRounded (softrRounded.js) a tu proyecto
2. Llamar al método ‘domready’ del objeto window, para comenzar a instancear softrRounded en tantos elementos necesites.
   window.addEvent(’domready’,Site.start);
   1. Instancear para cada elemento a redondear la clase softrRounded con sus respectivas opciones.var Site={
      start:function(){
      new softrRounded(’div1′,{’tl’:{’w':30,’h':30},’bg’:'7394B8′,’color’:'687D95′});
      new softrRounded(’div2′,{’tr’:{ ‘w’:50, ‘h’:50},’bl’:{ ‘w’:50, ‘h’:50},’bg’:'7394B8′, ‘color’:'596B80′});
      new softrRounded(’div3′,{’tr’:{ ‘w’:30, ‘h’:30},’bl’:{ ‘w’:30, ‘h’:30},’br’:{ ‘w’:30, ‘h’:30},’bg’:'7394B8′,’color’:'CFD9E6′});
      new softrRounded(’div4′,{’all’:{ ‘w’:130, ‘h’:130},’bg’:'7394B8′,’color’:'FFB900′});
      }
      };

Documentación:

• softrRounded.js
• clase: new softrRounded(/*string*/ element, /*object*/ options);
  • element:
    El elemento DIV o HTML a redondear. Puede utilizarse un ID, como ‘div1′ ó ‘div2′, para redondear objeto por objeto. También es posible redondear colecciones por medio de una clase css, como ‘.clase1′ ó ‘.clase2′.
  • options:
    Recibe un objeto compuesto de:
    • La o las esquinas a redondear. Ésta debe llamarse:
      • all(todas)|tl(top left)|tr(top right)|bl(bottom left)|br(bottom right) , y debe recibir como valor otro objeto compuesto de -w- width y -h- height.
        Ejemplo:
        ‘tl’:{’w':30,’h':30}
        ‘all’:{ ‘w’:130, ‘h’:130}
    • La propiedad -bg- con el color de fondo de la esquina redondeada.
      Ejemplo:
      ‘bg’:'7394B8′
    • La propiedad -color- con el color de la esquina redondeada.
      Ejemplo:
      ‘color’:'FFB900′
• Ejemplos de la sintáxis:

new softrRounded(’div1′,{’tl’:{’w':30,’h':30},’bg’:'7394B8′,’color’:'687D95′});
new softrRounded(’div2′,{’tr’:{ ‘w’:50, ‘h’:50},’bl’:{ ‘w’:50, ‘h’:50},’bg’:'7394B8′, ‘color’:'596B80′});
new softrRounded(’div3′,{’tr’:{ ‘w’:30, ‘h’:30},’bl’:{ ‘w’:30, ‘h’:30},’br’:{ ‘w’:30, ‘h’:30},’bg’:'7394B8′,’color’:'CFD9E6′});
new softrRounded(’div4′,{’all’:{ ‘w’:130, ‘h’:130},’bg’:'7394B8′,’color’:'FFB900′});

Ver ejemplo funcionando

RSS 2.0 | comenter | trackback