Como redondear las esquinas de un DIV con jquery.corners
Categories: JQuery, Tutoriales - Tags: jquery.plugin, tutorial jquerySi hay algo que me gusta usar en mis proyectos son cuadros con esquinas redondeadas. Siempre queda bien y le da un aire moderno a la web. Es muy facil de hacer y tiene un monton de utilidades como por ejemplo para marcos de fotos, redondear tablas, botones o simplemente divs redondos.
Hay infinidad de plugins que cumplen esta función pero a mi el que más me gusta es JQuery Corners.
Para utilizarlo como siempre debemos utilizar la ultima version de JQuery y del plugin.
1 2 | <script type="text/javascript" src="js/jquery-latest.js"></script> <script type="text/javascript" src="js/jquery.corners.js"></script> |
Con esto tendriamos el plugin cargado. En este ejemplo voy a hacer que tanto el div como la foto tengan tengan la clase “rounded” por lo que para aplicar el plugin hago lo siguiente:
1 2 3 4 5 6 7 | <script type="text/javascript"> $(document).ready(function(){ //espero que cargue el DOM y aplico el plugin a todos los elemento con clase rounded $('.rounded').corners(); }); </script> |
Tan solo nos quedaria añadir el código HTML :
1 2 3 4 5 | <div id="wrapper"> <div id="cuadro1" class="rounded"> Div con gif degradado de fondo </div> <img id="cuadro2" class="rounded" src="images/gatito.jpg"/> Marco para foto redondo </div> |
Y aplicarle un estilo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <style> body { color:#666666; font-family:'Trebuchet MS',sans-serif; font-size:14px; line-height:1.5em; text-align:justify; } #cuadro1{ background:#D7E9F3 url(images/intro2.gif) repeat-x scroll left top; margin-bottom:50px; padding:30px 80px; } #cuadro2{ padding:10px; background-color:#EEEEEE; border:1px solid #CCCCCC; margin-right:50px; } #wrapper{ width:370px; margin:0 auto; } </style> |
Otra cosa a tener en cuenta es que podemos pasarle opciones como por ejemplo un radio de 8px y que sea transparente (en caso de tener imagenes o hover states):
1 | $('.rounded').corners("8px transparent"); |
Pueden ver el ejemplo terminado en esta página.
ACTUALIZACIÓN
Como menciona Jereny en IE no redondea las imágenes. Si quieren hacer un marco para la imagen redondeado lo pueden hacer de la siguiente forma:
1 | <div id="cuadro2" class="rounded"><img src="images/gatito.jpg"/></div> Marco para foto redondo |
El código CSS varia en cuanto a IE como Firefox
1 2 3 4 5 | #cuadro2{ padding:10px; background-color:#EEEEEE; border:1px solid #CCCCCC; <------ ESTA LINEA NO FUNCIONA EN IE, ya que no redondea el borde } |
[...] toque final voy a redondear las esquinas del DIV contenedor del reloj con jquery.corners como vimos anteriormente en el blog. [...]
Hola,
Gracias por la info. Hay alguna manera para poner borde a un div y que se redonde? Es que en IE no se redondea bien
Saludos!
Jonijnm , a mi si me funciona bien con IE , El borde del div lo haces con CSS , el plugin solo se encarga de redondearlo.
Buen posta me sirvio bastante , gracias por el aporte, espero postees mas cosas sobre jquery….
Un abrazo hasta pronto
Hola como estan… muy buena info, pero mi pregunta es que si lo podemos aplicar en los form, input, select, botones… Si se puede como seria? y si no? alguna otro plugin o ayuda
Felicitaciones y saludos
En este compilado tenes 4 o 5 plugins más para redondear esquinas. Te recomiendo el primero , que es de malsup
Tengoun inconveniente estoy rediseñando en website pero el problema con el squery.corner (o al menos mi problema) es que tengo un fondo de pagina o de div contenedor que tiene una imagen que no es de un solo color esu ndegrade especial entonces cuando coloco el div a redondear las esquinas me aparecen de otro color, negro, azul dependiendo del color que yo le ponga pero no se como ponerle transparente para que tome el color del div contenedor, sino me queda mal porque el fondo no es un color definido es una imagen en psd me explico??? he probado con el transparent pero no me funciono alquien podria explicarme como se hace paraque las esquinas que sobran del redondeo me tome la imagen del div contenedor
Hola Damian,
Como dice JoniJnm, en IE7 no se redondean las esquinas de los div, de hecho, acceso al ejemplo que colocas en esta pagina: "Pueden ver el ejemplo terminado en esta página." desde IE7 y no se redondean las esquinas de la imagen del gato.
Saludos!
Tienen ustedes razon, se me paso por alto. Una solucion seria incluir la foto dentro del div y redondearlo. El unico problema es que en IE si ponemos borde no se redondea. Ahora actualizo el post
Hola! Ya estuve probando en varias ocasiones con wordpress y no me funcional. Sin embargo cuando lo simulo en un html sin php, me va bien.
He probado en 2 distintas copias de wordpress.
el source de jquery he puesto con
/js/..
tu has probado ponerlo en un blog? lo que veo aqui es una imagen tomada de pantalla.
doy las gracias por exponer este tutotial!
me refiero que el source esta puesto con el codigo phpphp bloginfo('template_directory')
[...] un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners. Hoy les explico lo mismo tan solo usando CSS3. 1 <div class="rounded"> Este es un [...]
yo no se por que, pero en mi div (de lo que estoy armando) me cambia el margin, width y demás que me permita posicionarlo, es decir, me deja pading margin cero, me deja muy pegado al borde y me jode lo previo del css….
no se si es una joda del js, o que garompa, pero me esta desquisiando. habrá algo q no compliq tanto como css 3 pero compatible con iexplore? o tendremos que hacer una protesta con antorchas y prender fuego a bill gates y cagarlo bien a trompadas, me juego las pelotas que usa linux en la casa… ¬ ¬
Muy buena, pero cuando intento pasar dos parámetros no lo asume, podría alguien publicar como hacerlo? o se debe a mi versión de jquery? tengo la mas reciente. Gracias.
Ejemplo: Quiero que solo tenga las esquinas superiores redondeadas para eso utilizo el parametro "top", pero cuando coloco otro parametro no lo asume. ".corners("top") . corners("10px") (Asi lo hago y no me lo asume, solo el top) y el top tiene por defecto pocos pixeles de redondeo.
Nota: guiandome por malsup. Gracias nuevamente
Funcione a la perfeccion en IE 7, siempre y cuando no se ponga una imagen de fondo tras las esquinas o el div, ya que toma como por defecto el color que se encuentre. En mi fondo body tenia una imagen y un color gris en el mismo, pero en el div contenedor con esquinas redondeadas con este plugin me toma el colo gris como relleno para las esquinas, dando un efecto no estetico en IE, pero en todos los demas navegadores excelente.
como puedo poner dos imagenes uno alado de otro y que tengan link. [email protected], te dejo mi correo, si me puedes pasar la info te agradeceria.