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).
11 comentarios:
hola Oloman, lo probaré!!!, después te digo si me sale como a ti...besitos!!!
Muy buen truco, Oloman! si le pongo la url de una imágen al contenido entonces también redondeamos la imágen?
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.
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
Hola Oloman, podrías indicarnos cómo se haría para hacer el div semi-transparente?
Muchas gracias!
Prepararé un post, pero es bastante fácil:
http://oloblogger.blogspot.com/2007/10/efecto-transparente-para-imgenes.html
Hola, yo he de ser bastante torpe porque no me sale :S Creé 2 archivos html y css.
Con un enlace o una descripción de lo que te sale mal, quizás podríamos ver algo...
hola
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
Hola Mucha Moda. Si se ven separados es porque no está todo en la misma línea (sin saltos de idem).
PUBLICAR UN COMENTARIO