In this article we are going to design a simple ribbon to an Image, Icon or Tile etc. to make it more beautiful.
In your View page, Just take a division in which we have to create the icon with ribbon.
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.
You will see the following output in your browser for the above CSS.
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.