How to Create Animated Pure CSS Ribbon Shape

Author
In CSS Tutorial, Other Mar 4, 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.

Make sure, we are going to show you one example but if you are looking for different design ribbons then here we have the list of 10+ Pure CSS Ribbon Shapes which are ready to use.

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 the class name ribbon then we will have an HTML5 element i is defined four times to create an awesome looking Ribbon Shape.

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

CSS Styling for Ribbon Shape

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.

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 use the advance CSS3 property :nth-child The first and second i require the same styles, so we define both instead of separately.

.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. But we want to make it look as good as possible.

.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); } } 

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 *