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.<\/p>\n
This Featured Ribbon effect is actually one that can be easily implemented using minimal\u00a0CSS. 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.<\/p>\n
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\u00a0on the corner of the element.<\/p>\n
<div class=\"container\">\r\n <div class=\"corner-ribbon\">\r\n <span>Cool!<\/span>\r\n <\/div>\r\n <h4>Cool Feature<\/h4>\r\n <img src=\"http:\/\/lorempixel.com\/175\/175\/\" alt=\"placeholder image\" \/>\r\n<\/div><\/pre>\nThe CSS<\/h3>\n
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.<\/p>\n
@import url(https:\/\/fonts.googleapis.com\/css?family=Quicksand:400,700);\r\n\r\nbody{\r\n font-family: 'Quicksand';\r\n background-color: #e6e6e6;\r\n}\r\n\r\n.container {\r\n width: 220px;\r\n height: 300px;\r\n position: relative;\r\n border:1px solid #444;\r\n background: #fff;\r\n margin: 25px auto;\r\n}\r\n\r\n.corner-ribbon {\r\n position: absolute;\r\n right: -5px; top: -5px;\r\n z-index: 1;\r\n overflow: hidden;\r\n width: 75px; \r\n height: 75px; \r\n text-align: right;\r\n}\r\n\r\n.corner-ribbon span {\r\n font-size: 12px;\r\n color: #fff; \r\n text-transform: uppercase; \r\n text-align: center;\r\n font-weight: bold; \r\n line-height: 20px;\r\n transform: rotate(45deg);\r\n -webkit-transform: rotate(45deg);\r\n -moz-transform: rotate(45deg);\r\n width: 100px; \r\n display: block;\r\n background: #E37676;\r\n background: linear-gradient(#E37676, #DB5858);\r\n box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);\r\n position: absolute;\r\n top: 19px; right: -21px;\r\n}\r\n\r\n.corner-ribbon span::before {\r\n content: '';\r\n position: absolute; \r\n left: 0px; top: 100%;\r\n z-index: -1;\r\n border-left: 3px solid #E37676;\r\n border-right: 3px solid transparent;\r\n border-bottom: 3px solid transparent;\r\n border-top: 3px solid #E37676;\r\n}\r\n.corner-ribbon span::after {\r\n content: '';\r\n position: absolute; \r\n right: 0%; top: 100%;\r\n z-index: -1;\r\n border-right: 3px solid #E37676;\r\n border-left: 3px solid transparent;\r\n border-bottom: 3px solid transparent;\r\n border-top: 3px solid #E37676;\r\n}\r\n\r\n.container h4{\r\n padding: 3px;\r\n text-align: center;\r\n}\r\n\r\n.container img{\r\n display: block;\r\n width: 175px;\r\n margin: 0 auto;\r\n}<\/pre>\nAfter adding\u00a0all of the above CSS to your stylesheets, \u00a0you should end up with a final product that looks something like this:<\/p>\n
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!<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading “Create a Featured Ribbon Effect Using CSS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/2613"}],"collection":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/comments?post=2613"}],"version-history":[{"count":1,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/2613\/revisions"}],"predecessor-version":[{"id":2614,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/2613\/revisions\/2614"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=2613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=2613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=2613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}