Infobox with Pure CSS 3D Ribbon

This post has been updated

This article was written back in 2010, when my knowledge of CSS was still rather limited. I've now updated the technique here to use much more semantic code. While the article below is still good if you're after a laugh, I recommend you read the new article if you plan on using the ribbon yourself.

10 May 2010 07:51

10 May 2010 07:51

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

Page Source

While it can look a bit like div soup, it’s important to have a container for the infobox, as it will also allow you to position it around the page without having to reconfigure the location of the triangles. You need to have a separate div for each triangle - one will be on the left, and one on the right. And instead of a separate class for the header, I prefer to just use the h3 of the infobox class.

[[div class="infobox-container"]]

[[div class="triangle-l"]]
[[/div]]
[[div class="triangle-r"]]
[[/div]]

[[div class="infobox"]]
+++ This is the Header
This is the content of the infobox.
[[/div]]

[[/div]]

CSS

We’ll start off by resetting the container, and setting up the infobox and it’s header. I chose 250px wide, but you can make it as wide as you like - you’ll just need to adjust the location of the triangles to suit.

.infobox-container {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: auto;
}
.infobox {
    width: 250px;
    background: #424242;
    padding: 10px 5px 5px 5px;
    margin:10px;
    color: #fff;
    font-size: 90%;
}
.infobox h3 {
    background: #3198dd;
    width: 270px;
    color: #fff;
    padding: 10px 5px;
    margin: 0;
    font-size: 160%;
    text-align: center;
    font-weight: bold;
}
infobox-0.png

Next we’ll centre the header by setting it’s position to relative and moving it left 15px.

.infobox h3 {
    position: relative;
    left: -15px;
}
infobox-1.png

Now for the cool part - setting up the triangles. The height and width is set to 0, the border-width to 13px and the border-color sets all but one side transparent. You also need to position them absolutely to prevent a big gap at the top of the infobox.

.infobox-container .triangle-l {
    border-color: transparent #2083c2 transparent transparent;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
}
.infobox-container .triangle-r {
    border-color: transparent transparent transparent #2083c2;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
}
infobox-2.png

You can see both of the triangles at the top left of the container. Setting the position to absolute and a bit of trial and error with the top and left declarations and you can position them under the header where they should be.

.infobox-container .triangle-l {
    position: absolute;
    left: -12px;
    top: 45px;
}
.infobox-container .triangle-r {
    position: absolute;
    left: 266px;
    top: 45px;
}
infobox-3.png

However, we want the triangles to display beneath the infobox, so we’ll employ the z-index to set the appropriate layering. It’s important for the position to be either relative or absolute, otherwise the z-index won’t work.

.infobox {
    position: relative;
    z-index: 90;
}
.infobox h3 {
    position: relative;
    z-index: 100;
}
 
.infobox-container .triangle-l {
    z-index: 0; /* displayed under the infobox */
}
.infobox-container .triangle-r {
    z-index: 0; /* displayed under the infobox */
}
infobox-4.png

That’s the basics of the infobox, but we won’t stop there. We’ll jazz it up a bit with some gradients, border radius and box shadows to enhance the 3D effect. We’ll also add a text shadow to the text in the ribbon.

.infobox {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
    background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
}
.infobox h3 {
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
    background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
    text-shadow: #2187c8 0 -1px 1px;
}

As pointed out by alert reader leiger, the infobox will inherit the formatting for links from the site's theme, which may clash with the dark background of the box. To overcome this, you just need to define some appropriate values to the link selector. If you change the background of the infobox, you may also need to change these declarations as well. 
.infobox a {
    color: #35b0ff;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.infobox a:hover, .infobox a:focus {
    text-decoration: none;
    border-bottom: 1px dotted #35b0ff;
}

And here it is - a lovely infobox that will be sure to catch the attention of your site visitors.

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?
This is a link

You can also use the above technique to wrap a ribbon around the outside of the page container, like I have done on the Theme Changes page. You'll just need to assign an appropriate z-index to the #container, #content-wrap, #main-content or #page-content, depending on your site's theme.

This blog entry was inspired by an article at pvmgarage.com.

View Demo & Code

This post has been updated

This article was written back in 2010, when my knowledge of CSS was still rather limited. I've updated the article here to use much more semantic code. You should check it out.

This post has been updated

This article was written back in 2010, when my knowledge of CSS was still rather limited. I've now updated the technique here to use much more semantic code. While the article below is still good if you're after a laugh, I recommend you read the new article if you plan on using the ribbon yourself.

Enjoy the article? Tweet it!

tags — 3d infobox pure-css ribbon

Discussion - No comments yet…29 comments

Add a New Comment
or Sign in as Wikidot user
(will not be published)
- +
Help: wiki text quick reference
3d_archive2010infoboxpure-cssribbon
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.