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:
17 comentarios:
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!!
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.
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.
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.
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);
}
Todo es válido man0l0, gracias por el aporte :)
moda de curvas = google (google ads)
cuidado con google no vaya ser q despues nos de vuelta la torta y se convierta en googoft
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.
Ojalá le sea útil, Gem@ :)
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.
Ahh, me olvidaba, como tambien aclaro no funciona con IE.
Sharck_Bloody:
Eso es verdad y justamente, porque no funciona en IE es que no está en el post :)
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 ;)
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
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.
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.
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
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...