Aquí esta la segunda parte del tutorial para crear cuadros con bordes redondeados (pueden ver la primera aquí). Decía que podría interesarnos que el área de trabajo (donde insertar texto, imágenes, tablas, etc.) incluyera bordes y esquinas como marca la imágen; para, por ejemplo, insertar elementos en cuadros de poca altura.
¿Por qué no usar una única imágen de fondo? Para que los cuadros puedan expadirse o contraerse según el contenido.
Aquí va el código:
Código CSS
#cuadro2{
background-color:#009232;
border: 0px;
padding:0px;
width: 178px;
}
.arribaizquierda2{
background: transparent url(arriba-izquierda.png) scroll no-repeat top left;
padding: 0;
display: block;
}
.arribaderecha2{
background: transparent url(arriba-derecha.png) scroll no-repeat top right;
padding: 0;
display: block;
}
.abajoizquierda2{
background: transparent url(abajo-izquierda.png) scroll no-repeat bottom left;
padding: 0;
display: block;
}
.abajoderecha2{
background: transparent url(abajo-derecha.png) scroll no-repeat bottom right;
padding: 0;
display: block;
height: 178px;
}
.medio2{
display: block;
margin:0px;
}
.textofooter{
padding-left: 11px;
padding-top: 0px;
}
Código HTML
<div id=”cuadro2″>
<span class=”arribaizquierda2″>
<span class=”arribaderecha2″>
<span class=”medio2″>
<span class=”abajoizquierda2″>
<span class=”abajoderecha2″>
<!– Contenido del cuadro (empieza) –>
<span class=”textofooter”>texto, texto, texto</span>
<!– Contenido del cuadro (termina –>
</span></span></span></span></span></span>
</div>
Nota (importantísima): tengan cuidado si copian y pegan el código desde aquí porque podrían tener errores con las comillas (se pegan comillas no válidas).
Otra cuestión a tener en cuenta es que el formato del texto o lo que inserten dentro del cuadro NO va en la etiqueta .medio2 como era el caso de la otra guía. Creen etiquetas nuevas dentro del cuadro para darle formato al contenido como por ejemplo .textofooter.
