Bordes redondeados en la Web con jQuery

En este breve pero utilísimo post vamos a ver cómo estilizar el contenido de nuestra web a través del uso de “contenedores” de texto con bodes redondeados. Para ello haremos uso de CSS y JavaScript (más concretamente, la librería jQuery). Para ello deberemos seguir los siguientes pasos:

  1. Descargar la librería jQuery (nosotros hemos descargado la versión “minified and gziped”).
  2. Descargar la librería jquery-roundcorners-canvas (es la que nos proporcionará las “instrucciones” para crear los bordes redondeados).

Una vez descargado todo lo almacenaremos en una carpeta llamada “js” en nuestro directorio de trabajo. Recordad que esto es una de las muchas formas de hacerlo, podéis crear la carpeta “js” en cualquier carpeta de vuestro sistema de ficheros, sólo debéis tener en cuenta la ruta en la que se encuentra a la hora de “llamar” a los ficheros para utilizarlos correctamente.

Aclarado esto, lo que haremos será extraer los ficheros “excanvas.pack.js” y “jquery.corner.pack.js” contenidos dentro del archivo “jquery-roundcorners-canvas061.zip” en la carpeta “js”. Llegado a este punto tendremos en la carpeta “js” los siguientes ficheros:

  1. excanvas.pack.js
  2. jquery.corner.pack.js
  3. jquery-1.2.2.min.js

Llegado este punto sólo deberemos incluir las rutas de estos ficheros en nuestro código X/HTML de la siguiente forma (evidentemente, entre las etiquetas <head> y </head>):

<!--[if IE]><script type="text/javascript" src="js/excanvas.pack.js"></script><![endif]-->
<script type="text/javascript" src="js/jquery-1.2.2.min.js">
</script><script type="text/javascript" src="js/jquery.corner.pack.js"></script>

(NOTA: La primera línea sirve para que IE sea capaz de crear los bordes redondeados.)

Una vez incluido esto en el código sólo tendremos que indicarle a jQuery qué esquinas del código queremos redondear. Un ejemplo:

Código jQuery (JavaScript) :

print ' <script type="text/javascript">';
$(document).ready(function() {';
$("#menuPrincipal .idMenuPrincipal").corner("top 10px");';
});';
</script>';

Código X/HTML :

...
<div id="menuPrincipal">
<ul>
<li class="idMenuPrincipal">INF. GENERAL</li>
<li><a href="index.php?sec=1">SECCIÓN 1</a></li>
<li><a href="index.php?sec=2">
SECCIÓN 2</a></li>
<li><a href="index.php?sec=3">
SECCIÓN 3</a></li>
<li><a href="index.php?sec=4">
SECCIÓN 4</a></li>
<li><a href="index.php?sec=5">
SECCIÓN 5</a></li>
<li><a href="index.php?sec=8">FAQ</a></li>
</ul>
</div>
...

De esta forma, lo que hacemos es indicar a jQuery que redondee el borde superior (tanto derecho como izquierdo) a 10px de la classe “idMenuPrincipal” dentro del identificador “menuPrincipal”. Es una de las muchas variantes en la forma de redondear esquinas. Si queréis más información sobre cómo conseguir el efecto de los bordes redondeados podéis dirijiros al sitio oficial de jQuery.

Otras librerías capaces de realizar una tarea similar son:

  1. Curvy Corners.
  2. Nifty Corners.
  3. Mochikit.
Anuncios

~ por inforlandia en febrero 13, 2008.

3 comentarios to “Bordes redondeados en la Web con jQuery”

  1. buenas estube probando esta utilidad pero tengo un inconveniente, tengo como fondo de la web una imagen y el DIOV es blanco, cuando intento visualizarlo me hace los bordes redondeados pero de fonde esos bordes me aprece blanco o el color de la pagina que haya definido, como puedo hacer para qeu desaparezca ese fondo y pueda verlo bien

  2. estuve probando esto y si coloca los bordes de las esquinas redondeados, pero esto funciona bien cuando en background se utiliza colores, pero no funciona bien cuando se utiliza una imagen de fondo y quedan las esquinas redondeadas, pero tambien quedan espacios en blanco al lado de las esquinas redondeadas, alguien sabe como solucionarlo?

  3. I love it when folks come together and share opinions.
    Great website, continue the good work!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s

 
A %d blogueros les gusta esto: