Krazy Korners-Snazzy Borders (cajas originales y esquinas redondeadas)

Como su nombre indica, son múltiples formas de encajar nuestros textos: en cajas con esquinas muy originales. Es cosa de Stu Nochols, y podéis ver cómo ha quedado en mi BLOG DE PRUEBAS; también podéis ver aquí una prueba con esquinas redondeadas (snazzy borders).

Lo mejor de todo es que funciona con sólo CSS... SIN UNA SOLA IMAGEN:

#krazy_container {display:block; margin-right:25px; position:relative; background:#bcb; padding:50px 0;}
#krazy_container h2 {margin-bottom:1em;}
#krazy_container h3 {clear:both; margin-top:4em;}

/* Inset 3D Raised */
.raised {background: transparent; width:40%; margin:0 auto;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.raised p {padding-bottom:0.5em;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#ccc; border-left:1px solid #fff; border-right:1px solid #999;}



/* Inset 3D Curved */
.inset {background: transparent; width:40%; margin:0 auto;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}


.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}

/* Chamfer Borders*/
.chamfer {background: transparent; width:40%; margin:0 auto;}
.chamfer h1, .chamfer p {margin:0 10px;}
.chamfer h1 {font-size:2em; color:#000; letter-spacing:1px;}
.chamfer p {padding-bottom:0.5em;}

.chamfer .top, .chamfer .bottom {display:block; background:transparent; font-size:1px;}
.chamfer .b1, .chamfer .b2, .chamfer .b3, .chamfer .b4, .chamfer .b5 {display:block; overflow:hidden; height:1px; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}
.chamfer .b1 {margin:0 5px; background:#000;}
.chamfer .b2 {margin:0 4px;}
.chamfer .b3 {margin:0 3px;}
.chamfer .b4 {margin:0 2px;}
.chamfer .b5 {margin:0 1px;}

.chamfer .boxcontent {display:block; background:#eca; border-left:1px solid #000; border-right:1px solid #000;}

/* Square cutout Borders*/
.square {background: transparent; width:40%; margin:0 auto;}
.square h1, .square p {margin:0 10px;}
.square h1 {font-size:2em; color:#00c; letter-spacing:1px;}
.square p {padding-bottom:0.5em;}

.square .top, .square .bottom {display:block; background:transparent; font-size:1px;}
.square .b1t {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-top:1px solid #00c;}
.square .b2 {display:block; height:1px; margin:0; background:#9ce; border-left:7px solid #00c; border-right:7px solid #00c; overflow:hidden;}
.square .b1b {margin:0 6px; display:block; overflow:hidden; height:5px; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c; border-bottom:1px solid #00c;}

.square .boxcontent {display:block; background:#9ce; border-left:1px solid #00c; border-right:1px solid #00c;}

/* Curved cutout Borders*/
.curved {background: transparent; width:40%; margin:0 auto;}
.curved h1, .curved p {margin:0 10px;}
.curved h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.curved p {padding-bottom:0.5em;}

.curved .top, .curved .bottom {display:block; background:transparent; font-size:1px;}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {display:block; overflow:hidden; height:1px;}
.curved .b2, .curved .b3, .curved .b4 {background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #fff;}
.curved .b1 {margin:0 4px; background:#fff;}
.curved .b2 {margin:0 4px; height:2px;}
.curved .b3 {margin:0 3px;}
.curved .b4 {margin:0; height:1px; border-width:0 3px 0 3px;}

.curved .boxcontent {display:block; background:#e0cea3; border:0 solid #fff; border-width:0 1px;}

/* flared serif */
.serif {background: transparent; width:40%; margin:0 auto;}
.serif h1, .serif p {margin:0 10px;}
.serif h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.serif p {padding-bottom:0.5em;}

.serif .top, .serif .bottom {display:block; background:transparent; font-size:1px;}
.serif .b1, .serif .b2, .serif .b3, .serif .b4 {display:block; overflow:hidden;}
.serif .b1, .serif .b2, .serif .b3 {height:1px;}
.serif .b2, .serif .b3 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}
.serif .b4 {background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff;}

.serif .b1 {margin:0; background:#fff;}
.serif .b2 {margin:0 1px; border-width:0 2px;}
.serif .b3 {margin:0 3px;}
.serif .b4 {height:2px; margin:0 4px;}

.serif .boxcontent {display:block; background:#fc0; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}

/* Pillar type */
.pillar {background: transparent; width:40%; margin:0 auto;}
.pillar h1, .pillar p {margin:0 10px;}
.pillar h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.pillar p {padding-bottom:0.5em;}

.pillar .top, .pillar .bottom {display:block; background:transparent; font-size:1px;}
.pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4 {display:block; overflow:hidden;}
.pillar .b1, .pillar .b2, .pillar .b4 {height:1px;}
.pillar .b2, .pillar .b3 {background:#d66; border-left:1px solid #fff; border-right:1px solid #fff;}
.pillar .b4 {background:#d66; border-left:4px solid #fff; border-right:4px solid #fff;}

.pillar .b1 {margin:0 2px; background:#fff;}
.pillar .b2 {margin:0 1px; border-width:0 1px;}
.pillar .b3 {height:2px; margin:0;}
.pillar .b4 {margin:0 2px;}

.pillar .boxcontent {display:block; background:#d66; border-left:1px solid #fff; border-right:1px solid #fff; margin:0 5px;}


/* Barrel cutout Borders*/
.barrel {background: transparent; width:40%; margin:0 auto;}
.barrel h1, .barrel p {margin:0 10px;}
.barrel h1 {font-size:2em; color:#fff; letter-spacing:1px;}
.barrel p {padding-bottom:0.5em;}

.barrel .top, .barrel .bottom {display:block; background:transparent; font-size:1px;}
.barrel .b1, .barrel .b2, .barrel .b3, .barrel .b4, .barrel .b5 {display:block; overflow:hidden; height:1px; background:#e0cea3;}
.barrel .b1 {border-left:10px solid #dfd5c0; border-right:10px solid #dfd5c0;}
.barrel .b2 {border-left:5px solid #dfd5c0; border-right:5px solid #dfd5c0;}
.barrel .b3 {border-left:3px solid #dfd5c0; border-right:3px solid #dfd5c0;}
.barrel .b4 {border-left:2px solid #dfd5c0; border-right:2px solid #dfd5c0;}
.barrel .b5 {border-left:1px solid #dfd5c0; border-right:1px solid #dfd5c0;}
.barrel .b1 {margin:0 33%;}
.barrel .b2 {margin:0 20%;}
.barrel .b3 {margin:0 12%;}
.barrel .b4 {margin:0 5%;}
.barrel .b5 {margin:0 1px;}

.barrel .boxcontent {display:block; background:#e0cea3; border-left:1px solid #fff; border-right:1px solid #999;}

.- El HTML:

<h2>Krazy Korners</h2>

<div id='krazy_container'>

<div class='raised'>

<b class='top'><b class='b1'/><b class='b2'/><b class='b3'/><b class='b4'/></b>

<div class='boxcontent'>



<h1>3D Raised</h1>

<p>Rounded corners with raised borders</p>

</div>

<b class='bottom'><b class='b4b'/><b class='b3b'/><b class='b2b'/><b class='b1b'/></b>

</div>

<p/>

<div class='inset'>

<b class='top'><b class='b1'/><b class='b2'/><b class='b3'/><b class='b4'/></b>

<div class='boxcontent'>

<h1>3D Inset</h1>

<p>Rounded corners with inset borders</p>

</div>

<b class='bottom'><b class='b4b'/><b class='b3b'/><b class='b2b'/><b class='b1b'/></b>



</div>

<p/>

<div class='chamfer'>

<b class='top'><b class='b1'/><b class='b2'/><b class='b3'/><b class='b4'/><b class='b5'/></b>

<div class='boxcontent'>

<h1>Chamfer Border</h1>

<p>A 45 degree border</p>

</div>

<b class='bottom'><b class='b5'/><b class='b4'/><b class='b3'/><b class='b2'/><b class='b1'/></b>

</div>



<p/>



<div class='square'>

<b class='top'><b class='b1t'/><b class='b2'/></b>



<div class='boxcontent'>

<h1>Square cutout Border</h1>

<p>A box with cutout corners</p>

</div>

<b class='bottom'><b class='b2'/><b class='b1b'/></b>

</div>



<p/>



<div class='curved'>

<b class='b1'/><b class='b2'/><b class='b3'/><b class='b4'/>

<div class='boxcontent'>

<h1>Curved cutout Border</h1>

<p>A box with cutout corners</p>



</div>

<b class='bottom'><b class='b4'/><b class='b3'/><b class='b2'/><b class='b1'/></b>

</div>

<p/>



<div class='serif'>

<b class='top'><b class='b1'/><b class='b2'/><b class='b3'/><b class='b4'/></b>



<div class='boxcontent'>

<h1>NEW! Flared shape</h1>

<p>Corners to give a serif effect.</p>

</div>

<b class='bottom'><b class='b4'/><b class='b3'/><b class='b2'/><b class='b1'/></b>

</div>

<p/>



<div class='pillar'>

<b class='top'><b class='b1'/><b class='b2'/><b class='b3'/><b class='b2'/><b class='b4'/></b>



<div class='boxcontent'>

<h1>NEW! Pillar shape</h1>

<p>Corners to give a rounded pillar effect.</p>

</div>

<b class='bottom'><b class='b4'/><b class='b2'/><b class='b3'/><b class='b2'/><b class='b1'/></b>

</div>

<p/>





<div class='barrel'>

<b class='top'><b class='b1'/><b class='b2'/><b class='b3'/><b class='b4'/><b class='b5'/></b>

<div class='boxcontent'>



<h1>Barrel shape</h1>

<p>A box with top and bottom bulges.</p>

</div>

<b class='bottom'><b class='b5'/><b class='b4'/><b class='b3'/><b class='b2'/><b class='b1'/></b>

</div>

Y para quien quiera una caja con esquinas redondeadas sin una sola imagen, sólo con CSS, tenemos otra de Stu Nichols:

.- CSS:

#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}

.- HTML:

<h2>Snazzy Borders</h2>



<div id='xsnazzy'>

<b class='xtop'><b class='xb1'/><b class='xb2'/><b class='xb3'/><b class='xb4'/></b>

<div class='xboxcontent'>



<h1>Snazzy Borders</h1>

<p>Based on Nifty Corners By Alessandro Fulciniti<br/>http://pro.html.it/esempio/nifty/</p>



<h2>Rounded borders without images</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim

ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl

ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum iriure dolor in hendrerit

in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla

facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent

luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

<b class='xbottom'><b class='xb4'/><b class='xb3'/><b class='xb2'/><b class='xb1'/></b>

</div>

</div>