Esquinas redondeadas con CSS | Oloblogger Un poco farragoso quizás, pero perfectamente visible en todos los navegadores y sin necesidad de crear, almacenar y utilizar diversas imágen...

8 de abril de 2009

Esquinas redondeadas con CSS

Un poco farragoso quizás, pero perfectamente visible en todos los navegadores y sin necesidad de crear, almacenar y utilizar diversas imágenes.

El truco está en crear líneas de 1px de altura (2 y 3 en las zonas menos pronunciadas) que van disminuyendo su anchura progresivamente. Las líneas así construidas, se apilan y en sus extremos simulan una esquina redondeada. Para construir las líneas de distinto tamaño, utilizamos 9 bloques (DIV) aplicando márgenes distintos.

Este es un texto encerrado en una caja con esquinas redondas. No importa el tamaño del texto, porque la parte central conserva las dimensiones necesarias.


Este sería el código CSS a instalar antes de ]]></b:skin>
#caja {
width: 400px; /*ANCHO TOTAL DE LA CAJA*/
color: #990000; /*COLOR DEL TEXTO*/
text-align:center;
margin:0px auto;
}

.redondeado {
height: 1px;
overflow: hidden;
background-color: #cccccc; /* COLOR DE LA CAJA */
}

/* LAS LINEAS PARA FORMAR LA PARTE REDONDEADA */
.r1 { margin: 0 12px;}
.r2 { margin: 0 9px;}
.r3 { margin: 0 7px;}
.r4 { margin: 0 6px;}
.r5 { margin: 0 5px;}
.r6 { margin: 0 4px;}
.r7 { margin: 0 3px;}
.r8 { margin: 0 2px; height: 2px;}
.r9 { margin: 0 1px; height: 3px; }

.contenido {
height: auto;
padding: 0 15px;
}


Ahora para formar la caja en cualquier post o artilugio, lo hacemos de la siguiente manera:

<div id="caja">
<div class="redondeado r1"></div>
<div class="redondeado r2"></div>
<div class="redondeado r3"></div>
<div class="redondeado r4"></div>
<div class="redondeado r5"></div>
<div class="redondeado r6"></div>
<div class="redondeado r7"></div>
<div class="redondeado r8"></div>
<div class="redondeado r9"></div>
<div class="redondeado contenido">Este es un texto encerrado en una caja con esquinas redondas. No importa el tamaño del texto, porque la parte central conserva las dimensiones necesarias.</div>
<div class="redondeado r9"></div>
<div class="redondeado r8"></div>
<div class="redondeado r7"></div>
<div class="redondeado r6"></div>
<div class="redondeado r5"></div>
<div class="redondeado r4"></div>
<div class="redondeado r3"></div>
<div class="redondeado r2"></div>
<div class="redondeado r1"></div>
</div>


Como decía al principio, quizás un poco farragoso, pero con ir copiando y pegando el código necesario allá dónde lo necesitemos, la cosa se simplifica bastante. Hay que tener en cuenta que blogger mete saltos de línea entre DIV's si estos se redactan dentro de un post, tal y como se muestran aquí. En ese caso, basta con escribir el código todo seguido (sin retornos de carro).

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

15 comentarios :

  1. hola Oloman, lo probaré!!!, después te digo si me sale como a ti...besitos!!!

    ResponderEliminar
  2. Muy buen truco, Oloman! si le pongo la url de una imágen al contenido entonces también redondeamos la imágen?

    ResponderEliminar
  3. No Luz. Con este código, si pones una imagen como contenido, tendrás el resultado que se puede ver al final de la entrada: una imagen sin modificaciones pero con el fondo de esquinas redondeadas.

    ResponderEliminar
  4. OKi,con el fondo transparente tal parece que fuera la imagen la que redondea sus esquinas!jaja
    Lo bueno es que se vea en IE que hasta ahora no era posible.
    A probarlo!!!!!
    Gracias Oloman

    ResponderEliminar
  5. Hola Oloman, podrías indicarnos cómo se haría para hacer el div semi-transparente?

    Muchas gracias!

    ResponderEliminar
  6. Prepararé un post, pero es bastante fácil:

    http://oloblogger.blogspot.com/2007/10/efecto-transparente-para-imgenes.html

    ResponderEliminar
  7. Hola, yo he de ser bastante torpe porque no me sale :S Creé 2 archivos html y css.

    ResponderEliminar
  8. Con un enlace o una descripción de lo que te sale mal, quizás podríamos ver algo...

    ResponderEliminar
  9. Hola! Seguí todos lo pasos y los bordes de abajo se ven perfectos pero los de arriba se ven separados del resto del post, que puedo estar haciendo mal??
    Gracias

    ResponderEliminar
  10. Hola Mucha Moda. Si se ven separados es porque no está todo en la misma línea (sin saltos de idem).

    ResponderEliminar
  11. Y el border radious que te parece?? se que en IE no se ve pero es muy sencillo de programar.

    ResponderEliminar
  12. Raúl, el border-radious es lo más cómodo, pero de momento no es visible para todos los navegadores. Si no te importa que sea así, es lo ideal.

    ResponderEliminar
  13. hey gracias estuve buscando en muchoss lados, muchas graciaas de vdd!!!

    ResponderEliminar
  14. Este sigue valiendo, pero actualmente hay otros sistemas más fáciles ;)

    ResponderEliminar