curvyCorners es una librería hecha en Javascript con el cual podemos darle bordes redondeados a cualquier div de nuestro HTML. Se puede personalizar el tamaño de los border e incluso asignarle anti-alias.
Esta librería viene a facilitar a los maquetadores de HTML para la implementación de esquinas redondeadas sin la necesidad e usar tablas e imágenes. Resulta de muy buena utilidad pues los bordes los podemos manejar con CSS, por lo cual si decidimos cambiar nuestro diseño solo haría falta modificar la hoja de estilos con lo cual modificaríamos la apariencia de todos nuestros bordes.
El uso de esta librería es muy sencillo, primero debes bajar la ultima versión de curvyCorners, extraer los archivos y escoger de acuerdo a tus necesidades uno de los archivos rounded_corners.inc.js o rounded_corners_lite.inc.js y renombrarlo a rounded_corners.js, luego en tu HTML debes incluir esta librería:
<script type="text/JavaScript" src="rounded_corners.js"> </script>
curvyCorners se debe aplicar a un DIV, para ello creamos un div con un texto de saludo de ejemplo:
<div id="myDiv">Hola mundo en roundedCorners</div>
Luego seteamos los valores para las esquinas que vamos a crear y asignarle a nuestro div la propiedad de redondeo.
<script type="text/JavaScript">
window.onload = function() {
sett = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: false
}
var vdiv = document.getElementById("myDiv");
var vCorner = new curvyCorners(sett, vdiv);
vCorner.applyCornersToAll();
}
</script>
Finalmente tendremos el siguiente código, en donde hemos agregado estilos para el DIV seleccionado.
<html>
<head>
<title>unijimpe: curvyCorners</title>
<script type="text/JavaScript" src="rounded_corners.js">
</script>
<script type="text/JavaScript">
window.onload = function() {
sett = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: false
}
var vdiv = document.getElementById("myDiv");
var vCorner = new curvyCorners(sett, vdiv);
vCorner.applyCornersToAll();
}
</script>
<style type="text/css">
#myDiv {
background-color:#0099CC;
color:#FFFFFF;
font-family: "trebuchet ms", verdana, sans-serif;
font-weight: bold;
font-size: 13px;
text-align: center;
vertical-align: middle;
height: 60px;
}
</style>
</head>
<body>
<div id="myDiv"><br />Hola mundo en roundedCorners</div>
</body>
</html>
Con lo cual tenemos el siguiente [TBOX]resultado, http://samples.unijimpe.net/curvy.html, curvyCorners Demo, 400, 110[/TBOX]. Puedes ver mas ejemplos y la documentación completa en http://www.curvycorners.net/. Además de ello cuenta con foro donde se puede compartir los avances que se realizan para esta librería.
Comentarios Total 7 comentarios
Publicado: 15/09/2006 7:29 am
Holas!!… yo tambien eh probado con esta libreria, y no se si es que la uso mal o no, pero al cargar la pagina por unos segundos me muestra la cada div en cuadrado, y despues redondea, me imagino que se podria usar con un metodo en el body, pero creo que es un fallo de esta libreria, o tal vez sea yo que la uso mal cuando tenga tiempo probare tu codigo y te comento si me pasa lo mismo. Por otro lado lo de las imagenes, redondeadas, solo funciona si son dentro de un div y esta como fondo no??, porque eh intentado aplicar el efecto a un campo div y otro img el div lo hace el img no.
Un saludo , y enhorabuena por este blog, explicas muy bien y el diseño es muy claro.
P.D ya te robare algun par de cosas muy interesantes que tienes
Publicado: 16/09/2006 8:13 pm
El que se muestren los divs cuadrados al inicio es por que el javascript necesita procesar los datos para mostrar las esquinas redondeadas y en algunos casos consume recursos de tu computadora. El segundo punto, es que se aplican los bordes a los Divs y no a su contenido asi que solo se podria aplicar a la imagen de fondo.
Publicado: 17/04/2007 6:39 am
He ido probando lo que has puesto pero me salen las esquinas cuadradas, e incluso me he copiado el codigo fuente del ejemplo pero me sigue sin salir. Que hago mal?? es que soy nueva en estas cosas y voy un poco perdida. gran aporte Besos
Publicado: 11/01/2008 1:58 am
hola estoy trabajando en una pagina para una cooperativa electrica con dreamweaver,el problema es que nno tengo mucha creatividad,si alguin me puede dar una mano con algunas plantillas estaria bueeno,las paginas que cree me salen con muchos errores y el tema es que una ves creada la pagina podria hagarrar el laburo para mantenerla.hasta pronto y gracias.mi email es justoever@hotmail.com
Publicado: 22/12/2008 2:34 pm
Ta wena la libreria.. aunke lo unico que no me gusto fue que al cargar la pagina.. muestra en menos de un segundo: las barras de desplazamiento de abajo y del costado del navegador.. aunque sea poco.. igual mueve las cosas de la pagina y se nota el movimiento.. pense que era yo.. pero probe los ejemplos que vienen con la libreria y pasa lo mismo :(
Publicado: 25/02/2009 10:02 am
Como se cual de los dos archivos escoger? rounded_corners.inc.js o rounded_corners_lite.inc.js??? Cual es la diferencia de ambos, eso no explicaste.
Bajé la extensión de dreamweaver, es fácil de usar pero no funciona en explorer 6 y en mozilla me agrega como un padding del tamaño de las esquinas.
Publicado: 11/05/2009 5:15 pm
No pude bajar la ultima versión de curvyCorners