Facil no es la palabra para describir la forma de usar esta librería con la cual podremos hacer que nuestras cajas tengan los bordes redondeados y sean visibles en todos los navegadores. Existen muchas formas de redondear nuestros elementos pero, para mi, mediante Javascript es la mejor forma (despues de una imagen con los bordes redondeados).
¿Como hacerlo?
Primero hemos de añadir el fichero js que se encargará de interpretar nuestra petición para redondear un elemento (en este caso un div).
<script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>Definimos el <div></div> que queremos redondear.
<div id="myDiv"></div>
Ahora solo nos queda definir las opciones específicas de nuestro «box», esto lo haremos en <head></head> añadiendo al evento onload del objeto window las siguiente líneas.
<script type="text/JavaScript">
window.onload = function()
{
settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true,
autoPad: false
}
var divObj = document.getElementById("myDiv");
var cornersObj = new curvyCorners(settings, divObj);
cornersObj.applyCornersToAll();
}
</script>
Con un poco de imaginación y el manual de empleo podrás conseguir efectos muy interesantes.
2 comentarios, 2 referencias
+
#