Creating A Graphical Ribbon Using CSS3 and HTML5

css3 ribbonCombining HTML5 and CSS3  can be quite fun to play around with. The only downside is, at the time of publishing this, many people still using Internet Explorer can’t appreciate the nuances of using code versus images.

In this example, a web-optimized screenshot of the graphic is 16KB. The uncompressed code is 4KB. That means a much faster loading time for the end user.

The image above is a screenshot example. The image below is a HTML example along with the code. Here is a jsfiddle for you to play around with.

This is a CSS3 Ribbon Sorry IE users!

Plenty of room for subhead text here.

The HTML code:

<div id=”ribbon-container”>
<div class=”ribbon-bubble”>
<div class=”ribbon-rectangle”><h2>This is a CSS3 Ribbon<br />Sorry IE users!</h2></div>
<div class=”ribbon-triangle-l”></div> <!– Left triangle –>
<div class=”ribbon-triangle-r”></div> <!– Right triangle –>
<div class=”ribbon-info”>
<h2 align=”center”>Plenty of room for subhead text here.</h2>
</div>
</div>
</div>​

The CSS code:

/*3d ribbon */

#ribbon-container {
    margin: 0px auto 0px auto; /* centered */
    width: 195px;
}

.ribbon-bubble {
    clear: both;
    margin: 0px auto;
    width: 195px;
    background: #a8c6e2;
    -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);
    position: relative;
    z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.ribbon-rectangle {
    background: #106bc0;
    height: 55px;
    width: 225px;
    position: relative;
    left:-15px;
    top: 20px;
    float: left;
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    z-index: 100; /* the stack order: foreground */
}

.ribbon-rectangle h2 {
    font-size: 20px;
    color: #fff;
    padding-top: 6px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    text-align: center;
    line-height: 22px;
}

.ribbon-triangle-l {
    border-color: transparent #106bc0 transparent transparent;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: -30px;
    top: 60px;
    z-index: -1; /* displayed under bubble */
}

.ribbon-triangle-r {
    border-color: transparent transparent transparent #106bc0;
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
    position: relative;
    left: 195px;
    top: 30px;
    z-index: -1; /* displayed under bubble */
}

.ribbon-info {
    padding: 30px 15px 20px 15px;
}

.ribbon-info h2 {
    font-size: 17px;
}
.ribbon-info h2 a {
    color: #2361A1;
    text-decoration: none;
}

.ribbon-info p {
    padding-top: 10px;
    font-size: 14px;
    line-height: 22px;
}

.ribbon-info p a {
    color: #c4591e;
    text-decoration: none;
}

.ribbon-info p a:hover {
    text-decoration: underline;
}

/*end 3d ribbon/*​

 

No comments yet.

Leave a Reply