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 and
:after 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
I start using CSS3 2 weeks ago (buttons, gradient backgrounds…), and just i’m using the infobox on my site, it looks great (always IE give some problems, but nothing serius)
Thanks for share information.
No probs Alben!
Are you using Morph by any chance? The selective loading of browser specific css files means that you can take a full progressive enhancement approach, utilizing all the css3 goodness and still have you site validate ;)
Thanks for the great bit of code, although it is a bit over my head. I had a little trouble implementing it into a WordPress theme and had to make a few minor changes. When I added it to the theme the horizontal alignment was off so I looked at the base code a bit closer;
The way you had the H3 class set with .infobox h3{} it wasn’t picking up all of the specs defined in the CSS.
I changed the div code from;
div=”class” to div=”id”
Which made all of the H3 CSS info unique to the div ID. Then in the CSS changed all of the periods to hash marks including the triangle CSS. This also fixed the horizontal alignment issues although I don’t know the reason why. It may be that the code works fine alone but when dropped into a site or theme with tons of other code there are other affecting factors.
Thanks again.
Hey Kelly :)
Great work at figuring out how to implement the code into your wordpress theme :) Obviously the html structure differs on different platforms and you need the necessary “hooks” (id in you’re case) to make it work. Do you have a link to your site, so i can see it in action?
Cheers,
Chris
I am using the boxes for dynamic sidebar boxes. In the example the top one is hard coded and the second one is a dynamic widget in the theme. Sorry the page is so bright, I’m still working out a balance and it’s not going stay like that.
http://ace.mapzone.net
I love the box, it’s very easy to work with and degrades more smoothly in IE than the box in the original article. I didn’t have to use a separate style sheet for it either.
Yeah, the infobox is perfect for widgets with dynamic content (like Modules in Joomla :P). Glad to here you found it useful :)
I need a solution that works in Internet Explorer 7 but :before and :after are apparently not supported.
Hey Richard,
I ran into this myself when I was working on one of our other sites and tried a bunch of different scripts that are meant to add IE6+7 support, but found that it added quite a bit of overhead to the page, leaving the experience somewhat sluggish.
The way I managed to work around it, was to conditionally inject a span for IE6/7 using jQuery, which I then used to for the before and after bits.
Obviously if someone is browsing with javascript disabled, they wouldn’t get the same result, but the way I see it, thats the less likely of the two and since the elements were purely presentational, it was a trade off I was willing to make.
Hopefully that helps :)
Cheers,
Chris