We’ve all seen those box, rectangle, or square shaped HTML elements that feature a “ribbon” draped around one of its corners to signify that this element is somehow different from the rest. The text in the corner ribbon might read “Featured” or “Limited Time Only” or “On sale!” Whatever the ribbons may say, they usually do a pretty good job of grabbing the users’ attention and letting them know what’s unique about any particular HTML element that the ribbon is applied to.
This Featured Ribbon effect is actually one that can be easily implemented using minimal CSS. The effect is created by the use and manipulation of the span elements and the :before and :after pseudo selectors. To see how it’s done, check out the example below.
The HTML
The HTML in this tutorial couldn’t be more straightforward. We’ve got an image inside of a rectangular div…and that’s pretty much it. The other div, the one with the class .corner-ribbon, makes up the featured ribbon that will appear on the corner of the element.
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
<div class="container"> <div class="corner-ribbon"> <span>Cool!</span> </div> <h4>Cool Feature</h4> <img src="http://lorempixel.com/175/175/" alt="placeholder image" /> </div>
The CSS
The CSS for this effect is a lot more involved than the HTML, but it’s still actually quite simple. By using the :before and :after pseudo-selectors in conjunction with transparent borders, the shape of the featured ribbon is easily created. Absolute positioning and playing with the z-index (you may need to increase the value of the z-index property depending on your project), the ribbon is featured prominently in the top right corner of the element.
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);
body{
font-family: 'Quicksand';
background-color: #e6e6e6;
}
.container {
width: 220px;
height: 300px;
position: relative;
border:1px solid #444;
background: #fff;
margin: 25px auto;
}
.corner-ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px;
height: 75px;
text-align: right;
}
.corner-ribbon span {
font-size: 12px;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: bold;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
width: 100px;
display: block;
background: #E37676;
background: linear-gradient(#E37676, #DB5858);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.corner-ribbon span::before {
content: '';
position: absolute;
left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #E37676;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #E37676;
}
.corner-ribbon span::after {
content: '';
position: absolute;
right: 0%; top: 100%;
z-index: -1;
border-right: 3px solid #E37676;
border-left: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #E37676;
}
.container h4{
padding: 3px;
text-align: center;
}
.container img{
display: block;
width: 175px;
margin: 0 auto;
}After adding all of the above CSS to your stylesheets, you should end up with a final product that looks something like this:
As always, the colors, content, positioning, etc are meant to be totally customized to reflect your project. Play around with the code and have fun with it!
