3D Ribbons With CSS3 and Pseudo-Elements

There is something appealing to creating visual effects without the use of images. CSS3 makes this easy to implement, but unfortunately, many of the functions leave older browsers and pre-Internet Explorer 9 high and dry. When using this code to create 3D ribbons, you’ll want to pick and choose your battles, as the implementation may not be practical. There are a ton of different ways people have chosen to create CSS-only ribbon effects, and I have found using pseudo-elements to be the best way to do so.

Some implementations use empty divs to position the left and right border effects in an attempt to have backwards compatibility with Internet Explorer, but in testing with real world scenarios, too much time is spent attempting to fix various visual issues different computer setups will encounter. If you want to make sure older browsers can view elements correctly, you’re better off sticking with actual images.

If you have a love for the bleeding edge and experimentation at the expense of your user base, then without further ado, here is the CSS3 3D Ribbon.

3D CSS3 Ribbon With Pseudo-Elements

These are some of the benefits of using pseudo-elements in your CSS Ribbon design:

  • Clean and simple code
  • Quick to implement
  • Flexible and easy to manipulate.

HTML code used:

<div class=”ribbon-box”>
<h2><code>3D CSS3 Ribbon With Pseudo-Elements</code></h2>
<p><code>These are some of the benefits of using pseudo-elements in your CSS Ribbon design:</code></p>
<ul><li><code>Clean and simple code</code></li>
<li><code>Quick to implement</code></li>
<li><code>Flexible and easy to manipulate.</code></li></ul>
</div>

And the CSS:

 .ribbon-box {
    /* See Reference 1 */
    position:relative;
    z-index:1;
    width:300px;
    padding:20px;
    margin:5px auto;
    background:#e2e5e8;
    /* css3 extras */
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}

.ribbon-box h2 {
    position:relative;
    padding:10px 15px;
    margin:0 -30px 20px;
    font-size:28px;
    line-height:32px;
    font-weight:bold;
    text-align:center;
    color:#fff;
    background:#106bc0;
    /* css3 extras */
    text-shadow:0 1px 1px rgba(0,0,0,0.2);
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
    box-shadow:0 1px 1px rgba(0,0,0,0.2);
    /* See “Reference #2″ */
    zoom:1;
}

.ribbon-box h2:before,
.ribbon-box h2:after {
    content:””;
    position:absolute;
    /* See Reference #3 */
    z-index:-1;
    top:100%;
    left:0;
    border-width:0 10px 10px 0;
    border-style:solid;
    border-color:transparent #106bc0;
}

.ribbon-box h2:after {
    left:auto;
    right:0;
    border-width:0 0 10px 10px;
}

.ribbon-box p {margin:1.4em 0 0;}

Reference #1:

The {position:relative; z-index:1} declarations used on .container are useful when also using z-index:-1 on the pseudo-element. They will prevent the pseudo-elements from falling behind any ancestors further up the document tree that have background colours of their own.

Reference #2:

IE 6 and IE 7 need hasLayout to be triggered on the h1. This will tidy up some slightly ugly rendering that is consequence of using the negative margins. This CSS declaration could be moved into your conditional IE style sheet if you use one.

Reference #3:

The {z-index:-1} declaration for the pseudo-elements is to push them behind the element they are generated from. This is only necessary because in this enhanced example a CSS box-shadow is being used to add a slight sense of depth to the effect.

However, this does introduce a slight problem that can be corrected by the technique described in Reference #1.

Thanks to Nicolas Gallagher (References), Harry Roberts (Pseudo-elements), and Piervincenzo Madeo (CSS3 Extras) for publishing your own finds and adaptations.

No comments yet.

Leave a Reply