Corner radius in pixels: 30px
Background color: #ffffff
Box color: #cccccc
El primero es el simple :
tenemos como css:
/* CSS Document */
.roundedcornr_box_293533{
background: #cccccc;
}.roundedcornr_top_293533 div {
background: url(roundedcornr_293533_tl.png) no-repeat top left;
}
.roundedcornr_top_293533 {
background: url(roundedcornr_293533_tr.png) no-repeat top right;
}
.roundedcornr_bottom_293533 div {
background: url(roundedcornr_293533_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_293533 {
background: url(roundedcornr_293533_br.png) no-repeat bottom right;
}
.roundedcornr_top_293533 div, .roundedcornr_top_293533,
.roundedcornr_bottom_293533 div, .roundedcornr_bottom_293533 {
width: 100%;
height: 30px;
font-size: 1px;
}
.roundedcornr_content_293533 { margin: 0 30px; }
como html:
<div class="roundedcornr_box_293533">
<div class="roundedcornr_top_293533"><div></div></div>
<div class="roundedcornr_content_293533">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
<div class="roundedcornr_bottom_293533"><div></div></div>
</div>
Las imagenes son:
* http://www.roundedcornr.com/roundedcornr_293533_tl.png
* http://www.roundedcornr.com/roundedcornr_293533_tr.png
* http://www.roundedcornr.com/roundedcornr_293533_bl.png
* http://www.roundedcornr.com/roundedcornr_293533_br.png
Vamos a ver como queda:
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
COMENTARIOS:
La linea font-size: 1px; es para mi super misteriosa ????
En explorer 6 se ve mal, se ve un rectangulo a la izquierda y no se ven los bordes de la dcha.
Lo corrigo poniendo width:90% en .roundedcornr_box_293533. Supongo que será cosa de esa maldita historia del maldito explorer 6 con los box.
No hay comentarios:
Publicar un comentario