Foros del Web » Programando para Internet » Jquery »

[Tutorial] jQuery Corners - Redondeado de esquinas

Estas en el tema de [Tutorial] jQuery Corners - Redondeado de esquinas en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/12/2008, 15:09
Avatar de ivor  
Fecha de Ingreso: abril-2005
Ubicación: Venezuela
Mensajes: 673
Antigüedad: 14 años, 7 meses
Puntos: 2
Mensaje [Tutorial] jQuery Corners - Redondeado de esquinas

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!
__________________
Twitter: ipad

Última edición por ivor; 13/12/2008 a las 14:53 Razón: Fé de errata...
  #2 (permalink)  
Antiguo 11/12/2008, 05:58
Avatar de TresPuntoDos  
Fecha de Ingreso: septiembre-2008
Ubicación: Madrid, España
Mensajes: 242
Antigüedad: 11 años, 2 meses
Puntos: 3
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

Buen tutorial, la unica pega que le veo es que el codigo iria dentro del body, no entre el head y el body, no?
__________________
Tres punto Dos - Mi Blog sobre J2EE, Java, Struts y Diseño Web
Proyecto BloJ - Crea tu blog Java
  #3 (permalink)  
Antiguo 11/12/2008, 13:33
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 15 años, 5 meses
Puntos: 53
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

Cita:
Iniciado por TresPuntoDos Ver Mensaje
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
  #4 (permalink)  
Antiguo 12/12/2008, 06:37
Avatar de ivor  
Fecha de Ingreso: abril-2005
Ubicación: Venezuela
Mensajes: 673
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

Cita:
Iniciado por stock Ver Mensaje
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!
__________________
Twitter: ipad
  #5 (permalink)  
Antiguo 12/12/2008, 09:46
Avatar de TresPuntoDos  
Fecha de Ingreso: septiembre-2008
Ubicación: Madrid, España
Mensajes: 242
Antigüedad: 11 años, 2 meses
Puntos: 3
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

Si me referia al codigo HTML porque la etiqueta div esta entre el head y el body
__________________
Tres punto Dos - Mi Blog sobre J2EE, Java, Struts y Diseño Web
Proyecto BloJ - Crea tu blog Java
  #6 (permalink)  
Antiguo 12/12/2008, 11:39
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 15 años, 5 meses
Puntos: 53
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

Cita:
Iniciado por TresPuntoDos Ver Mensaje
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....
  #7 (permalink)  
Antiguo 14/12/2008, 13:11
Avatar de TresPuntoDos  
Fecha de Ingreso: septiembre-2008
Ubicación: Madrid, España
Mensajes: 242
Antigüedad: 11 años, 2 meses
Puntos: 3
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

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
__________________
Tres punto Dos - Mi Blog sobre J2EE, Java, Struts y Diseño Web
Proyecto BloJ - Crea tu blog Java
  #8 (permalink)  
Antiguo 18/12/2008, 19:46
 
Fecha de Ingreso: octubre-2008
Mensajes: 40
Antigüedad: 11 años, 1 mes
Puntos: 1
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

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
  #9 (permalink)  
Antiguo 20/07/2009, 13:14
 
Fecha de Ingreso: abril-2009
Mensajes: 160
Antigüedad: 10 años, 8 meses
Puntos: 3
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

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
  #10 (permalink)  
Antiguo 16/09/2009, 11:16
 
Fecha de Ingreso: septiembre-2009
Mensajes: 1
Antigüedad: 10 años, 2 meses
Puntos: 0
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

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
  #11 (permalink)  
Antiguo 04/06/2010, 11:58
 
Fecha de Ingreso: mayo-2010
Mensajes: 3
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

gracias me ha servido de mucho!!
  #12 (permalink)  
Antiguo 04/06/2010, 14:51
Avatar de hector2c  
Fecha de Ingreso: noviembre-2007
Ubicación: Perú - Tacna
Mensajes: 979
Antigüedad: 12 años
Puntos: 25
Respuesta: [Tutorial] jQuery Corners - Redondeado de esquinas

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....
__________________
blog: hector2c.wordpress.com
email: [email protected]
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 07:36.