How to Create Animated Pure CSS Ribbon Shape

In CSS Tutorial, Other Last updated Mar 10, 2017
CSS Ribbon Shape

Today we are going to show you a CSS3 tip to create Pure CSS Ribbon Shape without using Jquery. As CSS3 turns into greater robust and is extra broadly supported, the options for making modern layout factors that can be created without graphics are countless! For a current tutorial, I decided to create a ribbon shape with pure CSS3. This tutorial will stroll you through the way it turned into completed.

As it seems, it’s honestly quite easy, the use of handiest easy, semantic HTML and some CSS3 trickery thanks to the magic of the border-width belongings. The only caveat: as with any new CSS3 strategies, it may act a piece wonky in a few IE browsers… we’re going to address that on the end of the educational.

CSS Ribbon Shape Markup

let’s have a look the HTML which is quite simple and very easy. We only have a main div with class name ribbon then we will have an HTML5 element i is defined four times.

 <div class="ribbon"> CSS Animated Ribbon <i></i> <i></i> <i></i> <i></i> </div> 

Now we have CSS, and we start the CSS by setting the width and height of ribbon. The margin, color and other elements like the background are set as per our need. You can change color or other items to make fit into your design.

 .ribbon { width: 400px; height: 60px; margin: 100px auto 0px; position: relative; color: #fff; font: 28px/60px sans-serif; text-align: center; text-transform: uppercase; background: #3D79D0; -webkit-animation: main 250ms; -moz-animation: main 250ms; -ms-animation: main 250ms; animation: main 250ms; } 

We do set the position to absolute for all the i HTML5 element.

 .ribbon i { position: absolute; } 

To style each i, we will used the advacne CSS3 property :nth-child The first and second i require the same styles so we define both instead of separetly.

 .ribbon i:first-child, .ribbon i:nth-child(2) { position: absolute; left: -20px; bottom: -20px; z-index: -1; border: 20px solid transparent; border-right-color: #043140; -webkit-animation: edge 500ms; -moz-animation: edge 500ms; -ms-animation: edge 500ms; animation: edge 500ms; } 

Ok, now we need to style the second, third and last one. Remember that, we are going to used border property to make the ribbon. We also added some CSS3 animation which doesn’t require in some cases.

 .ribbon i:nth-child(2) { left: auto; right: -20px; border-right-color: transparent; border-left-color: #043140; } .ribbon i:nth-child(3), .ribbon i:last-child { width: 20px; bottom: -20px; left: -60px; z-index: -2; border: 30px solid #1D53C0; border-left-color: transparent; -webkit-animation: back 600ms; -moz-animation: back 600ms; -ms-animation: back 600ms; animation: back 600ms; -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .ribbon i:last-child { bottom: -20px; left: auto; right: -60px; border: 30px solid #1D53C0; border-right-color: transparent; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } 

Here is animation that created using @keyframes

 /* animations */ @-webkit-keyframes main { 0% { -webkit-transform: scaleX(0); } 100% { -webkit-transform: scaleX(1); } } @-webkit-keyframes edge { 0%, 50% { -webkit-transform: scaleY(0); } 100% { -webkit-transform: scaleY(1); } } @-webkit-keyframes back { 0%, 75% { -webkit-transform: scaleX(0); } 100% { -webkit-transform: scaleX(1); } } @-moz-keyframes main { 0% { -moz-transform: scaleX(0); } 100% { -moz-transform: scaleX(1); } } @-moz-keyframes edge { 0%, 50% { -moz-transform: scaleY(0); } 100% { -moz-transform: scaleY(1); } } @-moz-keyframes back { 0%, 75% { -moz-transform: scaleX(0); } 100% { -moz-transform: scaleX(1); } } @keyframes main { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes edge { 0%, 50% { transform: scaleY(0); } 100% { transform: scaleY(1); } } @keyframes back { 0%, 75% { transform: scaleX(0); } 100% { transform: scaleX(1); } } 

CSS Ribbon Shape Demo

That’s it, and we are done. It is simple. Isn’t it? The small piece of code not only help you to build CSS ribbon but also eliminate the uses of the image. Here demo, have a look.

Leave a Reply

Your email address will not be published. Required fields are marked *