viernes, 21 de enero de 2011

Curvas y redondeces - Vagabundia

Curvas y redondeces


JMiur


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



  • No hay comentarios:

    Publicar un comentario

    Correo Vaishnava

    Archivo del blog