Wikidot Design & Development

Subtle CSS3 box shadows

Create a sophisticated infobox with subtle CSS3 box shadows.

After reading an article about a page-curling CSS3 box shadow, I was thinking of other ways to make use of the versatile property; this is what I came up with - a sophisticated infobox with shadows that make it pop.

shadow-box-all.png

Infobox with Pure CSS 3D Ribbon

Add some style to your site with this pure CSS3 infobox, featuring a 3D ribbon header. Oh, and did we say there’s no images!

Pure CSS Infobox

This is the content of the infobox. It is made with pure CSS - no images. Of course, you can change the colour of the background and header to match your site's theme.
Pretty cool, huh?

Infoboxes are a great way of displaying important information to visitors of your site - and they work even better when they’re easy on the eye. So today we’re brining you an infobox with a twist - it has a ribbon-style header that adds a touch of 3D class to your site. Plus, for the anti-photoshoppers out there, it’s made with pure CSS - which means you don’t need to worry about fiddling around with images or increasing the page loading time.

So how are we going to achieve this?, I hear you ask. Well, as you may or may not know, when browsers render a border, they are created as angles. If you increase the width of the border, that angle becomes a triangle. And by making all but one of the border sides transparent, you end up with a triangle on a transparent background. If you’d like to read more on this, there’s a great explanation here.
Now, back to the infobox. The image below shows the different components that will make up this box and header.

infobox-outline.png
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.