[Tutorial] jQuery Corners - Redondeado de esquinas

ivor · #1 (**permalink**) 09/12/2008, 15:09

Hace RATO no colaboro con el foro y esta vez quise hacer algo sencillo, pero muy util y "eye candy" a la hora de un buen diseño web basado en estándares web con CSS y jQuery.

Se trata del Plugin jQuery Corners, un plugin muy fácil de usar para el redondeo de esquinas muy all estilo -moz-border-radius para Firefox o -webkit-border- radius para Safari, la ventaja de este plugin es que es funcional 100% en iPhone, Chrome, Firefox, Safari 2+, Opera 9.0+, Internet Explorer 6+ y probablemente más...

Nuestro Markup:

Yo hago el ejemplo con un DOCTYPE Transitional (Solo a título ilustrativo)

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bordes redondeados con jQuery</title>
</head>

<body>

<--! Tu contenido aqui -->

</body>
</html>

Lo más importante para que nuestro plugin funcione es la llamada que debemos hacer a las librerías, para ello debemos descargar jQuery y el Plugin jQuery.Corners, luego llamarlos desde nuestro código y nos quedaría de la siguente forma:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="js/jquery-1.2.6.js"</script>
<script type="text/javascript" src="js/jquery.corners.js"</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bordes redondeados con jQuery</title>
</head>
<body>

<--! Nuestros DIV's aqui -->

</body>
</html>

Ahora aplicamos jQuery a las clases que queramos redondear, por ejemplo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="js/jquery-1.2.6.js"</script>
<script type="text/javascript" src="js/jquery.corners.js"</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bordes redondeados con jQuery</title>
</head>
<body>

<div style="background-color:#acc; padding:5px" class="redondear">
  Bordes redondeados con jQuery
</div>
<script>$(document).ready( function(){
  $('.redondear').corners();
});</script>

</body>
</html>

Esto quedaria de la siguiente forma EJEMPLO 1

Peeero, podemos jugar un poco con el código (Gracias a Dios existe jQuery y CSS) y podemos lograr excelentes bordes con fondos increíbles y totalmente accesibles por los navegadores.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="js/jquery-1.2.6.js"</script>
<script type="text/javascript" src="js/jquery.corners.js"</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bordes redondeados con jQuery</title>
</head>
<body>

<div style="background-color:#acc; background-image: url(images/bg.jpg); background-repeat: repeat-x; padding:5px" class="redondear">
 Bordes redondeados con jQuery
</div>
<script>$(document).ready( function(){
  $('.redondear').corners("15px");
});</script>

</body>
</html>

Esto quedaría así EJEMPLO 2

Fijense que la imagen de fondo es un simple estilo que le aplique a unos cuantos píxeles en Photoshop imagen

Para mayor información pueden visitar el siguiente sitio con tutoriales de como usar jQuery.Corners (en inglés).

Ojala les sea de utilidad,

Saludos.

Actualización: Corrección de errores

no se en que estaba pensando jeje... gracias!

TresPuntoDos · #2 (**permalink**) 11/12/2008, 05:58

Buen tutorial, la unica pega que le veo es que el codigo iria dentro del body, no entre el head y el body, no?

stock · #3 (**permalink**) 11/12/2008, 13:33

Cita:

Iniciado por TresPuntoDos

Buen tutorial, la unica pega que le veo es que el codigo iria dentro del body, no entre el head y el body, no?

realmente no importa donde lo pongas por que el código js se ejecuta inmediatamente después de que el DOM esta listo, esto es gracias al evento. ready

$(document).ready(....);

saludos

ivor · #4 (**permalink**) 12/12/2008, 06:37

Cita:

Iniciado por stock

realmente no importa donde lo pongas por que el código js se ejecuta inmediatamente después de que el DOM esta listo, esto es gracias al evento. ready

$(document).ready(....);

saludos

Eso es correcto, inclusive puedes ver ya el plugin funcionando!

TresPuntoDos · #5 (**permalink**) 12/12/2008, 09:46

Si me referia al codigo HTML porque la etiqueta div esta entre el head y el body

stock · #6 (**permalink**) 12/12/2008, 11:39

Cita:

Iniciado por TresPuntoDos

Si me referia al codigo HTML porque la etiqueta div esta entre el head y el body

jejejjejej asi es.... parece que ivor se ha equivocado....

TresPuntoDos · #7 (**permalink**) 14/12/2008, 13:11

Eso pasa hasta en las mejores famililas

Por cierto, volviendo al tema original. Este plugin esta muy bien pero tiene un pequeño problema, solo funciona si tu fondo es solido, si tiene degradados u otras cosas no funciona bien, es una lastima... aun asi perfecto el mini-tutotial

litoxXD · #8 (**permalink**) 18/12/2008, 19:46

bueno a mi me parece un buen tuturial antes yo hacia eso tanto con php como javascript puro (sin librerias) pero jquery es colosal con su simplesa todo queda a la mente del programador y de que tanto sepas del dom

javi37 · #9 (**permalink**) 20/07/2009, 12:14

Esta muy bien, pero aplicado el efecto a una etiqueta <p>, funciona en todos los navegadores excepto en safari 4.0+
Además si al corner() le das por ejemplo corner("20px") el alto de párrafo en todos los navegadores (explorer, chrome, opera) triplica su altura, no así en firefox, donde la altura permanece invariable..... y esto es un inconveniente muy grande, pero mucho, ¿cómo se puede evitar?

gracias

effervescente · #10 (**permalink**) 16/09/2009, 10:16

Buenas,

Después de mucho investigar, probar y probar he llegado al mismo punto de partida.

Ninguna de las librerías que he usado (las 2 que comentáis aquí) me funcionan en IE8. en Firefox perfecto pero en IE8 no hay manera.

Por ahí arriba leo que algunos si han podido, me gustaría que pusieran el código y los datos a las versiones de las librerias, y si procede enviarme un código para probar que efectivamente funciona, porque estoy desesperado. Quiero hacer un diseño, y lo de las imagense transparentes no es una opción viable... Y quiero empezar el diseño bien desde el principio.

Muchas gracias de antemano

gabatx · #11 (**permalink**) 04/06/2010, 10:58

gracias me ha servido de mucho!!

hector2c · #12 (**permalink**) 04/06/2010, 13:51

NO LES RECOMIENDO, usar este tipo de plugins, en eXeso, ya que lo que hace es generar un monton de filitas despues del div con un alto de 1px para dar el efecto de redondeado....