miércoles, 22 de agosto de 2012

TEXTOS EN CAJAS REDONDEADAS

Este es un texto encerrado en una caja con esquinas redondas. ¿Te gustaria poder contar con este recurso siempre que quieras?.

Pega este código en la plantilla de tu blog justo 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;
}

Luego allí donde queráis colocar esta caja redondeada de texto colocáis este código HTML:

<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>
Debéis tener en cuenta que tanto el nombre caja"#caja" como la definición "redondeado", pueden ser variados. En algunos casos podría no funcionar este truco, simplemente por que en otro lugar de tu blog ya han sido utilizados. Han de ser variados en ambos códigos no lo olvidéis.

No quiero terminar, sin antes nombrar la fuente que me ha proporcionado este genial truco, que he decido reflejar íntegramente en este blog, por las aclaraciones que sobre el realizo.
Vaya pues mi agradecimiento a:

3 comentarios :

  1. Hace dos días que he empezado a crear mi blog sin tener ni idea de cómo se hace pero de manera intuitiva ya lo publiqué, pero me gustarìa irle poniendo más cositas, así que este blog me viene muy bien, ahora a ver si me las aclaro incorporando tus sugerencias....gracias...

    ResponderEliminar