Pure CSS3 Infobox, with no additional presentational markup needed.

I recently came across two really awesome articles, showcasing some of the great possibilities available to us using CSS3.

The first was by one of my new favorite authors, Nicolas Gallagher, titled Multiple Backgrounds and Borders with CSS 2.1. In the article he shows us that it's actually been possible to implement multiple backgrounds since CSS 2.1 already, utilizing the :before & :after pseudo-elements.

The next article i came across, was by Wikidot (I'm not sure of the authors actual name), titled Infobox with Pure CSS 3D Ribbon, which was originally inspired by an article How To Create Depth And Nice 3D Ribbons Only Using CSS3, written by piervix In the tutorial, the author shows how we can create a really nice 3d ribbon effect, using pure css3. It was a really great article, but the one thing that bugged me was the need for additional presentational markup, which serves no purpose to the actual content.

Inspired by Nicolas's article, i decided to re-create the infobox, using generating content and the techniques showcased in his Progressive enhancement: pure CSS speech bubbles article.

Disclaimer: It's important to note, that all i did was combine the two techniques from these two authors and mishmashed the code from both articles to achieve the end result.

The final example:

/* infobox styling */
.infobox{
width:250px;
padding:10px 5px 5px 5px;
margin:10px;
position:relative;
z-index:90;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.55);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.55);
box-shadow:0 0 3px rgba(0,0,0,0.55);
background:#424242;
background:-webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
background:-moz-linear-gradient(top,#6a6a6a,#424242);
color: #fff;
font-size: 90%;
}
.infobox h3{
position:relative;
width:282px;
color:#fff;
padding:10px 0;
margin:0 -16px;
left:0;
z-index:100;
-webkit-box-shadow:0 0 3px rgba(0,0,0,0.55);
-moz-box-shadow:0 0 3px rgba(0,0,0,0.55);
box-shadow:0 0 3px rgba(0,0,0,0.55);
background:#3198dd;
background:-webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background:-moz-linear-gradient(top,#33acfc,#3198dd);
font-size:160%;
text-align:center;
text-shadow:#2187c8 0 -1px 1px;
font-weight:bold;
}
/* left shadow */
.infobox:before {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
top:49px; /* value = - border-top-width - border-bottom-width */
left:-10px; /* controls horizontal position */
width:0;
height:0;
border-width:10px 0 10px 10px; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#2083c2 transparent transparent; 
z-index:0;
}
/* right shadow */
.infobox:after {
content:"\00a0";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
top:49px; /* value = - border-top-width - border-bottom-width */
right:-10px; /* controls horizontal position */
width:0;
height:0;
border-width:10px 10px 10px 0; /* vary these values to change the angle of the vertex */
border-style:solid;
border-color:#2083c2 transparent transparent; 
z-index:0;
}
.infobox p{
font-size:1.2em;
color:#fff;
margin:15px 5px 10px 10px;
}
.infobox strong{
display:block;
}