Creating ribbon to the icon using LESS CSS

Goud.Kv
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 1175 red flag
Rating: 4.5 out of 5  
 2 vote(s)

Now a days, CSS plays a major role in the beautification of elements. Here in this, lets create a simple ribbon to the icon by using Less CSS.
Recommendation
Read Introduction to LESS in CSS before this article.

Introduction

Reusing the CSS code is the awesome advantage of Less. This will make the user to feel good and easy while modifying his StyleSheets. Now we are going a step in Less CSS in this article.


Objective

In this article we are going to design a simple ribbon to an Image, Icon or Tile etc. to make it more beautiful. 


Using the Code


View Page
In your View page, Just take a division in which we have to create the icon with ribbon.
<body>
    <div>
        <div class="cover">
            <div class="ribbon-cover"><div class="ribbon">FREE</div></div>
        </div>
    </div>
</body>

Less StyleSheet


Creating Variables

Lets take some variables that we are going to use them in our Less Sheet as below,

/* Variables */

@width: 280px;

@height: 370px;

@shadow: 0px 0px 7px rgba(0,0,0,0.3);

@rotate: rotate(45deg);//To get our ribbon in diagonal position

@color: #555;

@ribbon: #0094ff;//Main ribbon theme, Change it and See the Magic.
Creating Mixins

Create the Mixins(reusable class selectors) for different sections as below to make your Sheet handy and easy to understand and modify

.box-shadow{

  -webkit-box-shadow: @shadow;

  -moz-box-shadow: @shadow;

  box-shadow: @shadow;

    }

'.boxshadow' is the mixin used here for shadow effects in our project.

.ribbonBack{

  background-color: @ribbon;

  background-image: -webkit-gradient(linear, left top, left bottom, from(@ribbon), to(@ribbon - #00ff90)); 

  background-image: -webkit-linear-gradient(top, @ribbon, @ribbon - #00ff90); 

  background-image: -moz-linear-gradient(top, @ribbon, @ribbon - #00ff90); 

  background-image: -ms-linear-gradient(top, @ribbon, @ribbon - #00ff90); 

  background-image: -o-linear-gradient(top, @ribbon, @ribbon - #00ff90);

    }

'.ribbonBack' is the reusable class which is using to set the background for the ribbon.

.ribbonTxt{

  text-align: center;

  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;

  color: @color + #aaaaaa;

  padding: 7px 0;

  font: bold 15px Sans-Serif;//You can Change the font here

  /* text rotation */

  -webkit-transform: @rotate;

  -moz-transform: @rotate;

  -ms-transform: @rotate;

  -o-transform: @rotate;

    }

'.ribbonTxt' is the class for setting the text in the ribbon.

Creating final Less StyleSheet

Now Get into our final stage of ribbon creation by using class selectors.

.cover {

  margin: 50px auto;

  width: @width;

  height: @height;

  background: lighten(@color, 40%) ;

  border-radius: 5px;

  .box-shadow;

  position: relative;

  z-index: 90;

}

'.cover' is the main class of our div element in the view page. This will selects the particular area, width, height, color and border of the division element in our view page. If you observe that we are using a mixin '.box-shadow' in this class and reduced the code repeatability.

.ribbon-cover {

  width: @width - 195px;

  height: @height - 282px;

  overflow: hidden;

  position: absolute;

  top: -3px;

  right: -3px;

}

'.ribbon-cover' is for setting the position of the ribbon. 

.ribbon {  

  .ribbonTxt;

  .ribbonBack;

  .box-shadow;

  width: @width - 160px;

  position: relative;

  left: -5px;

  top: 15px; 

}

'.ribbon' is the main class of designing ribbon completely. If you see, we are using the three mixins in this class selectors and reduced lot of code repeating.

.ribbon:before, .ribbon:after {

  content: " ";

  border-top: 3px solid @ribbon - #00ff90;   

  border-left:  3px solid transparent;

  border-right: 3px solid transparent;

  position:absolute;

  bottom: -3px;

}


.ribbon:before {

  left: 0;

}

.ribbon:after {

  right: 0;

}

'.ribbon:before' & '.ribbon:after' are for setting effects to ribbon but we are almost used same for both here.

In the above code if you observe, we have used mixins to create the final ribbon. Using Mixins and Variables made our code very handy and easyily understandable. 

Output

You will see the following output in your browser for the above CSS.

Now, Go to your StyleSheet and change @ribbon variable in terms of color. for example, 

@ribbon: #b200ff;

After changing that single variable as above, You will see the following output in your browser.


Thats the Magic of Less and thats why 'LESS is MORE'. Change the ribbon to your favourite color and enjoy using it.

Conclusion

So far we have seen the creation of Ribbon Edged Icon Tile in the easy manner using Less CSS. Hope you understand it. If you have any doubts or confusions, feel free to ask below in the comments.


Thanks for reading,

Regards,
Krishna. 


Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)