Saltar a Comentarios

Viernes, Febrero 6th, 2009

Esquinas Redondeadas

Con la llegada de los estándares CSS3, han surgido nuevas opciones para diseñar nuestras páginas. Entre ellas, las más interesantes que encuentro están, las transparencias, los degradados y las esquinas redondeadas.

Voy a hablar de estas últimas, es algo que los diseñadores siempre han conseguido insertando imágenes redondas al borde y listo. Actualmente, y gracias a los estándares css3 también lo podemos realizar mediante código css con estas instrucciones:

    border-radius (estándar css)
    -moz-border-radius (cuando se trataba de mozilla,
         aunque desde la versión 3.0 ya lo hacemos
         con la instrucción anterior)
    -webkit-border-radius (safari y chrome)

El problema de hacerlo de este modo, es el de siempre, el maldito Internet Explorer, que ni en su versión 8 implementa estos estándares.
Una solución para tener las esquinas redondeadas en todos los navegadores, incluido Internet Explorer es usar JQuery Corners.
jQuery Corners es un plugin que nos permite realizar esquinas redondeadas de una manera bastante sencilla, sin imágenes o maquetación adicional y engorrosa en el código. Simplemente se define una clase y se aplica a un elemento HTML. Veamos como hacerlo:


- Primero descarga jQuery y jQuery corners y haz el llamado dentro de las etiquetas y :

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.corner.js" type="text/javascript"></script>



- Luego define la clase la cuál creará las esquinas redondeadas de la siguiente forma:

<script type="text/javascript">
<!--
$(document).ready( function(){
$('.redondas').corners();
});
// -->
</script>



- Y por último simplemente aplica la clase a cualquier elemento HTML, como por ejemplo a un típico selector DIV:

<div class="redondas">
Contenedor con esquinas redondeadas.
</div>

Esta es la forma más básica de usar el script aunque posee varias opciones de configuración, como puede ser el radio de curvatura general o para cada una de las esquinas o también podemos aplicar el script a botones de un formulario. Todas estas las podemos consultar en el sitio oficial de jQuery Corners
Es soportado por la mayoría de los navegadores e inclusive por el iPhone.

Links | jQueryjQuery Corners


No hay entradas relacionadas

4 Comentarios

  • Maikerl
    Mozilla Firefox Mozilla Firefox 2.0.0.17 en Windows Windows Vista
    Febrero 8th, 2009 at 15:52

    Si los iE6 ie7 ie8 tuvieran esto implementado, sería una gozada, que asco de navegadores!

  • pzin
    Safari Safari 525.20 en Mac OS Mac OS X
    Marzo 1st, 2009 at 17:51

    Pero no es sólo IE el único navegador que deja mucho que desear en éste sentido de los estándares. Y comentar que CSS3 solo está disponible a partir de Firefox 3.1.

  • Signo
    Mozilla Firefox Mozilla Firefox 3.0.8 en Windows Windows Vista
    Abril 19th, 2009 at 4:20

    Otra forma de hacerlo y sin usar JQuery es descargar el archivo border-radius.htc que circula por internet, y añadir al estilo del div que se quiere redondear la línea: behavior:url(border-radius.htc);
    Aunque esta solución redondea el div completo, no permite cosas como -moz-border-radius-topleft.

  • jereny
    Internet Explorer Internet Explorer 8.0 en Windows Windows Vista
    Noviembre 4th, 2009 at 7:01

    hola,
    he tratado de implementar jQuery y jQuery corners y solo se me ve en firefox, en ie7 y ie8 no se redondean las esquinas, me podrias decir como hago, aqui te va mi codigo:

    Documento sin título

    Contenedor con esquinas redondeadas.