Bordes redondeados con jQuery sin imágenes

Escrito por: Martín el 13-07-2009 11:58:34 y leído 8136 veces

Seguramente ya habrás utilizado o conocerás esta técnica. Se trata de poder utilizar bordes redondeados (que tan bien quedan) en los elementos de tu web sin utilizar imágenes para ello. El método, se vale de jQuery para adaptar los divs que indiques con el efecto que desees y, como se puede ver en la demo online que publiqué, es totalmente transparente con respecto a tu fondo.

Para aplicarlo, luego de agregar la librería jQuery en el head de tu web, debes indicar qué capa quieres redondear y el plugin se encarga de todo.

Mírate los códigos que aparecen a continuación, o mira el source de la demo.

Código CSS

/* esto no es necesario, puedes utilizar tus propios estilos */
body {background:#333 }
body, div, h1 { font-family: arial; margin: 0; padding: 0;font-size:18px;}
div.ejemplo { background-color: #ccc; padding: 20px;float:left;margin:20px}

Código JAVASCRIPT

$('#ejemplo1').corner();

Código XHTML

<div id="ejemplo1" class="ejemplo"><h1>Esto es un ejemplo: round</h1></div>

Categorías: Bordes Redondeados • Jquery • •

Artículos relacionados:

• 20 plugins para jQuery que no pueden faltar en tus webs
• Excelente listado de 240 plugins para jquery
• Menú o barra lateral (sidebar) siempre visible con scroll y jQuery
• jQuery Validate: la rápida validación de formularios.
• Formularios web con jQuery Validate y envío por phpmailer y gmail
• Calendario en PHP con eventos, jQuery y vTip
• 18 plugins jquery que no pueden faltar en tu web parte 2

100 Búsquedas de este artículo:

bordes redondeados jquery • bordes redondeados con jquery • jquery bordes redondeados • borde redondeado jquery • div redondeado jquery • redondear div jquery • div bordes redondeados jquery • bordes jquery • redondear imagenes con jquery • redondear bordes jquery • bordes redondos jquery • jquery border redondo • jquery borde redondeado • bordes con jquery • div redondeados con jquery • jquery fotos redondeadas • tablas jquery css • Formulario transparente con jquery • div redondeados jquery • jquery bordes • bordes redondos con jquery • textbox redondeados css • tablas elegante jquery • menu redondeado jquery • borde redondeado con jquery • tablas css jquery • borde imagen jquery • border redondeados jquery • menu redondos jquery • tabla redondeada css • jquery div redondeado • menu redondeado con jquery • redondear esquinas div jquery • bordes redondeados jquery 2011 • html capa redondear fotos máscara • jquery redondear imagen • redondear div con jquery • hacer bordes redondeados jquery • redondear con jquery • redondear bordes tabla jquery • bordes curvos jquery • botones redondeados jquery • jquery para redondear imagenes • bordes redondeados css jquery • input redondeado css • redondear esquinas de un div con jquery • jquery bordes redondos • redondear marcos htmlcss • jquery bordes redondeados en li • botones redondos html • textbox redondeados • redondear capas jquery • jquery para redondear bordes • imagenes con esquinas redondeadas jquery • redondeo de esuinas con jquery • bordes redondeados web • input con bordes redondeados • div con bordes redondeados jquery • bordes para iglesias • divs bordes redondos sin imagenes • div con bordes redondeados • jquery div redondeados • bordes redondeados en jquery • redondear divs con jquery • div redondeado con imagenes • jquery borde redondo • bordes redondeados div jquery • jquery para bordes redondeados • tabla esquina redonda jquery ui • redondear sin imagenes jquery • divs redondeados jquery • jquery cuadros redondeados • jquery redondear div • css punta redondeada • jquery ui bordes redondeados • borde al div en css ejemplos • jquery bordes redondeados imagenes • transparente fondo jquery • redondear bordes de div con jquery • boton redondo javascript • redondear tablas html • jquery show estilo explorer • como hacer figuras redondeadas con jquery • border redondeados con jquery • div con bordes redondeados con jquery • bordes en jquery • como nndar estilos curveados a las tablas en html#hl=es • borde curvo jquery • tablas con bordes redondeados jquery • textbox redondeado html • codigo html tabla con punta redonda e imagen • poner borde a un select jquery • div con bordes redondeados javascript • bordes redondeados en html con jquery • jquery bordes curvos • PLUGIN JQUERY PARA BORDES REDONDEADOS • Bordes redondeados en la Web con jQuery • acordeón jquery borde redondeado • div borde redondeado jquery • bordes redondeados jquerry •