JMiur [E]

La moda obliga a redondear las formas. Los bordes curvos son la marca que identifica las nuevas tendencias de la Web-2 sin embargo, aunque los métodos para realizar estas exquisiteces son muchos y variados, tienen casi todos un elemento en común, son complejos de entender y complicados de implementar.

Cada uno tiene su receta, algunas funcionan bien y otras no. Yo simplificaría las cosas y diría que hay cuatro posibilidades:
  1. utilizar imágenes de fondo
  2. utilizar CSS
  3. utilizar JavaScript
  4. utilizar algún servicio online que las haga por nosotros
Todas son soluciones válidas, cuál elegir depende de nuestras necesidades. Voy a comenzar con la primera que, pese a ser tramposa, es la que está al alcance de todos.

1. IMAGENES EN UNA TABLA DE 3x3

La idea es crear una tabla de 3 columnas y 3 filas con estas características:


imagen curvabackground-colorimagen curva
background-colorEL TEXTObackground-color
imagen curvabackground-colorimagen curva

donde las 4 esquinas contienen 4 imágenes transparentes como fondos y el ancho y alto de estas:
<td style="background: url(imagen); width:ancho; hight:alto;">
las 4 celdas laterales restantes tendrán un fondo igual a la imagen, la superior y la inferior serán de un alto igual a la imagen y de cualquier ancho en cambio, las laterales serán de un ancho igual a la imagen y de cualquier alto:
<td style="background-">color; width:ancho; hight:alto;">
La calidad del resultado sólo va a depender de la calidad de las imágenes, este es el ejemplo más simple:





Una tabla de 3x3 donde la única celda con contenido es la central.




2. UTILIZANDO CSS EXCLUSIVAMENTE

Es una técnica bastante sofisticada. Estos son ejemplo que encontré hace bastante tiempo en la web (lamento no recordar dónde).

El primero se basa en crear cuatro cuadrantes con un carácter Arial • (&bull;) posicionado con la propiedad absolute en cada esquina:







Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet. Duis autem in hendrerit in vulputate.



Para utilizarlo, debemos incluir el siguiente código CSS basado en una curva de 20x20 pixeles:


<style>
.curvy {position:relative; width:ancho; height:alto; margin:5em auto;
background:#colorcaja;color:#colorfondotransparente;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px;
color:#colorcaja; background:#FFF; overflow:hidden;}
#ctl {top:0px; left:0px;}
#cbl {top:alto-20px; left:0px;}
#ctr {top:0px; left:ancho-20px;}
#cbr {top:alto-20px; left:ancho-20px;}
#quadtl, #quadtr, #quadbl, #quadbr {position:absolute; font-size:altopx; font-family:arial;
color:#colorcaja;line-height:40px;}
#quadtl {left:-8px;}
#quadtr {left:-25px;}
#quadbl {left:-8px; top:-17px;}
#quadbr {left:-25px; top:-17px;}
#txt {position:absolute; top:5px; left:5px; width:ancho-10px;
height:alto-10px;}
</style>

Y se utiliza de esta manera:

<div class="curvy">
<div id="ctl"><div id="quadtl">&bull;</div></div>
<div id="cbl"><div id="quadbl">&bull;</div></div>
<div id="ctr"><div id="quadtr">&bull;</div></div>
<div id="cbr"><div id="quadbr">&bull;</div></div>
<div id="txt">cualquier texto o código HTML</div>
</div>


3. UTILIZANDO CSS Y JAVASCRIPT

Este es el método más difundido, algunas incluyen imágenes y otras no.

Nifty Corners es la más completa, se integra muy bien en cualquier página y es relativamente simple de usar. Su uso dentro de Blogger puede llegar a ser relativo pero vale la pena probar.

Aquí hay más direcciones donde pueden bajarse los archivos con los códigos necesarios y ver los ejemplos:
  1. http://guyfisher.com/workshop/css/corners/
  2. http://www.sperling.com/examples/box/
  3. http://www.svay.com/coins_arrondis/rounded_corners.html
  4. http://www.neuroticweb.com/recursos/css-rounded-box/
  5. http://www.quinncrowley.com/rounded.htm
  6. http://interface-7.net/20040218/

4. GENERADORES ONLINE


RoundedCornr genera bloques con esquinas redondeadas que incluye gradientes de color y otros cosas interesantes.

Y más direcciones de servicios online:
  1. Spiffy Box
  2. AllCrunchy
  3. CSS Rounded Box Generator

INFORMACION RECOMENDADA:

  • Mountaintop corners
  • CSS Design: Creating Custom Corners & Borders (Part I)
  • CSS Design: Creating Custom Corners & Borders (Part II)
  • Rounded corners in CSS
  • CSS and round corners: Borders with curves
  • CSS and round corners: Boxes with curves
  • Liquid round corners
  • How to Add Fluid Borders to Your Boxes with CSS
  • 17 comentarios:

    Daniel  

    Yo siempre he utilizado en las webs el primer método. el de crear una tabla donde las esquinas son gráficos redondeados. Pero es muy interesante ver que hay otros métodos mas finos que desconocía.
    Feliz nochebuena!!

    Responder
    JMiur  

    El primero, por ahora es el más "lógico" y está al alcance de todos. Los otros los puse como referencias, son experimentales. Feliz Navidad.

    Responder
    Migoz  

    Yo no estaría tan seguro sobre eso que la moda obliga a redondear las formas. Porque cíclicamente se tiende a unas modas y luego se vuelve a otras. Por ejemplo los parabrisas traseros de los autos. Ahora he visto como el diseño ha vuelto a ser rectangular con ángulos tendiendo a ser mas réctos, como los mismo televisores de pantalla plana. no? o estoy bolaseando? es solo mi opinión.

    Responder
    JMiur  

    Creo que la confusión viene con la palabra OBLIGA. La retiro. Tenés razón. Lo que quise decir es eso mismo, que es sólo una moda. Ahora, están de moda las redondeces y los colores pastel, mañana, quién sabe.

    Un gran saludo.

    Responder
    man0l0  

    Hola, no se si sea válido poner esto, ya que el artículo es bastante antiguo; también se pueden redondear cuadros usando 5 divs y 4 imágenes con el borde redondeado.

    suponiendo que tenemos las cuatro 4 imágenes: supizq.jpg supder.jpg infizq.jpg infder.jpg

    html:
    <div class="contenedor">
      <div class="supizq"></div>
      <div class="supder"></div>
      <div class="infizq"></div>
      <div class="infder"></div>
    </div>
    css:
    .contenedor {
    position: relative;
    width: ancho;
    height: alto;
    }
    .supizq {
    width: anchoredondeo;
    height: altoredondeo;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url(supizq.jpg);
    }
    .supder {
    width: anchoredondeo;
    height: altoredondeo;
    position: absolute;
    top: 0px;
    right: 0px;
    background-image: url(supder.jpg);
    }
    .supizq {
    width: anchoredondeo;
    height: altoredondeo;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-image: url(infizq.jpg);
    }
    .supizq {
    width: anchoredondeo;
    height: altoredondeo;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-image: url(infder.jpg);
    }

    Responder
    JMiur  

    Todo es válido man0l0, gracias por el aporte :)

    Responder
    okta  

    moda de curvas = google (google ads)

    cuidado con google no vaya ser q despues nos de vuelta la torta y se convierta en googoft

    Responder
    Gem@  

    Buscaba información sobre este tema, como de costumbre ni instinto no ha fallado :) te voy a mandar a alguien que a buen seguro la información le será de utilidad.

    Responder
    JMiur  

    Ojalá le sea útil, Gem@ :)

    Responder
    Sharck_Bloody  

    Hola, vi en el blog de gem@ que para redondear los objetos usaba estos parametros:

    -moz-border-radius: XXpx;
    -webkit-border-radius: XXpx;

    Donde XX es el numero de pixeles del ratio de la curva, no se si es obligatorio estableser un borde al elemento para que funcione, espero te sirva el dato y hasta podrias agregarlo al post.

    Responder
    Sharck_Bloody  

    Ahh, me olvidaba, como tambien aclaro no funciona con IE.

    Responder
    JMiur  

    Sharck_Bloody:

    Eso es verdad y justamente, porque no funciona en IE es que no está en el post :)

    Responder
    Gem@  

    Muy cierto, es una solución socorrida que como mucho vale para comprobar el efecto en un vista previa.
    Yo estuve intentando crear unas imágenes pero voy a probar con Nifty Corners a ver que tal ;)

    Responder
    JMiur  

    No es una mala solución pero, yo creo que los sitios deben poder ser vistos con cualquier navegador y de ahí que no esté ese tipo de código salvo como referencia.

    Cuando las empresas se pongan de acuerdo en las reglas, la vida será más sencilla :D

    Responder
    Alfredo  

    Excelente articulo, creo que me quedo con técnica 1, por que, la técnica 2( UTILIZANDO CSS EXCLUSIVAMENTE) no funciona adecuadamente si el fondo de la página es una imagen.
    Para que funcione el CSS con imagenes de fondo se necesita realizar cambios al actual CSS mostrado.

    Responder
    JMiur  

    Eso no es así. Funcionará igual sin importar si el fondode la página es una imagen o no; es fácil de probar. El fondo de esta entrada es una imagen.

    Responder
    SK-CHISTES  

    HOLA, ESPECTACULARES TUS TRUCOS
    DESCUBRI TU PAGINA Y ME PARECIO LA MEJOR DE TODAS A TODAS LES FALTA SIEMPRE 5 PARA EL PESO Y ESTA ES LA IDEAL PARA TENERLA COMO PAGINA DE INICIO ;)
    UN SALUDO.
    MARCOS

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR