Pure CSS3 Infobox, with no additional presentational markup
I recently came across a really interesting article that showcased some of the sweet goodness that can be achieved using css3 – the end result being a really slick infobox with 3d ribbons, that uses no images at all.
Image credit to Wikidot
The article was inspired by another similar post (“How to create depth and nice 3d ribbons only using css3″), written by piervix from PVMGarage. Both were great articles, but one thing that bugged me in both, was the need for additional presentational markup, which served no purpose to the actual content.
I then came across another awesome article (Multiple Backgrounds and Borders with CSS 2.1
– which I highly recommend you read) by one of my new favorite authors, Nicolas Gallagher
. In the article he shows us that it’s actually been possible to implement multiple backgrounds since CSS 2.1 already, utilizing a combination of generated content and the :before and :after pseudo-elements.
Image credit to Nicolas Gallagher.
Inspired by Nicolas’s article, I decided to re-create the infobox, using generated content
and the :before
pseudo-elements, showcased in his Progressive enhancement: pure CSS speech bubbles
article. See the end result below – no images AND no additional presentational markup. :)
The finished version
Click here to view the demo or Download the example files
Disclaimer: It’s important to note that all I did was combine the two techniques from the two aforementioned authors and mish-mashed the code from their articles to achieve the end result. Full credit goes to the original authors for coming up with the techniques.
Tags: css, css3, Labs