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:
- utilizar imágenes de fondo
- utilizar CSS
- utilizar JavaScript
- 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:
1. IMAGENES EN UNA TABLA DE 3x3
La idea es crear una tabla de 3 columnas y 3 filas con estas características:
| imagen curva | background-color | imagen curva |
| background-color | EL TEXTO | background-color |
| imagen curva | background-color | imagen 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 • (•) posicionado con la propiedad absolute en cada esquina:
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 • (•) 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>
.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">•</div></div>
<div id="cbl"><div id="quadbl">•</div></div>
<div id="ctr"><div id="quadtr">•</div></div>
<div id="cbr"><div id="quadbr">•</div></div>
<div id="txt">cualquier texto o código HTML</div>
</div>
<div id="ctl"><div id="quadtl">•</div></div>
<div id="cbl"><div id="quadbl">•</div></div>
<div id="ctr"><div id="quadtr">•</div></div>
<div id="cbr"><div id="quadbr">•</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:
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:
- http://guyfisher.com/workshop/css/corners/
- http://www.sperling.com/examples/box/
- http://www.svay.com/coins_arrondis/rounded_corners.html
- http://www.neuroticweb.com/recursos/css-rounded-box/
- http://www.quinncrowley.com/rounded.htm
- 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:
INFORMACION RECOMENDADA:
No hay comentarios:
Publicar un comentario