Welcome to ThemesGadget. This post will learn how to make a responsive CSS corner ribbon In blogger, ribbons corner, CSS corner ribbon over the image, corner ribbon design, free corner ribbon. Just follow our steps carefully to avoid any errors.
Introduction To Corner Ribbons
The CSS corner ribbon has become a go-to design for bloggers and web designers alike. It can be used as a visual accent to any page or blog, as an advertising banner, or even an interesting background image that can be expanded and expanded on. This article will show you how to add the CSS corner ribbon to your blogger sites in just five minutes!
If you’re like most bloggers out there, your site probably looks a bit plain at the moment. You may not even realize that your site is boring because you’ve got a lot going on.
But if you want to make your blog more attractive, you need to spend some time looking for ways to improve it.
What Is A CSS Corner Ribbon?
CSS corner ribbons can be used as headers or footers or accents around other parts of your site, such as Image Galleries and galleries with photo blocks. You can also use them in conjunction with other types of graphics (such as banners) to add flair to your site.
The next time you decide to get creative with your website, the possibilities are endless. You don’t need to go through the trouble of creating your CSS corner ribbon or spend hours making something from scratch. Keep following our blog.
CSS Corner Ribbon is a great way to add flair and style to a page’s appearance, not only on the look of your website but on the content as well. It’s also very easy and doesn’t require any advanced HTML/CSS skills knowledge!
If you plan to use a CSS corner ribbon, keep in mind that it will most likely differ from one site due to the theme’s quirks.
Why You Should Use A CSS Corner Ribbon
There are several ways to make a corner ribbon. The easiest is to copy and paste it from a website. However, you can be creative and make your ribbon that’s unique to you!
Don’t fall into the trap of thinking that CSS corner ribbons are bedazzling or flashy. They’re simple, straightforward, and easy enough for anyone to create.
The first step is deciding what type of ribbon you want to create. There are two types; horizontal and vertical.
For Example
If your blog page has less space, you will use horizontal ribbons for each section. If your blog page has enough space, you will use vertical ribbons on all page sections!
CSS corner ribbon is an effective way of making your website more appealing and inviting. Just a few minutes can make a huge difference in the way users interact with your content. You can add a stylish, professional look to any site with a CSS corner ribbon.
How To Make A Responsive CSS Corner Ribbon?
Today, I will teach you how to make your very own corner ribbon. The ultimate goal is to make your blog look appealing, professional, fun, and interesting. Hopefully, this tutorial will be useful for creating your CSS corner ribbon.
Creating a CSS corner ribbon for your blogger site isn’t complicated either! All you need are some CSS codes, a few images, and some HTML code:
Step 1 - Adding HTML
<section>
<h1 class="Ribb-Heading"><span>CSS3 RIBBONS</span></h1>
<div class="ribbon Back-img1"><span class="ribbon1"><span>Discount 10%</span></span></div>
<div class="ribbon Back-img2"><span class="ribbon2">U<br>N<br>P<br>L<br>U<br>G</span></div>
<div class="ribbon Back-img3"><span class="ribbon3">Discount 10%</span></div>
<div class="ribbon Back-img4"><span class="ribbon4">Discount 10%</span></div>
<div class="ribbon Back-img5"><span class="ribbon5">Discount 10%</span></div>
<div class="ribbon Back-img6">
<div class="wrap"><span class="ribbon6">Discount 10%</span></div>
</div>
</section>
Step 2 - Adding CSS
These CSS Codes are in a Compressed format. If you want to beautify, you can use our tool by Following this Link – CSS Beautifier Tool.
Change The highlighted CSS according to your requirement, For Example:- Image URL, And you can pick any of these designs listed below highlighted with a different colour, For Example, .ribbon1, .ribbon2, .ribbon3, etc.
<style type="text/css">
*, :after, :before {box-sizing: unset;}section{margin:0 auto;max-width:660px;padding:0 20px}h1{font-weight:normal!important;position:relative;background:#e7e8ff;width:50%;color:#262d3d;text-align:center;padding:10px 20px;margin:75px auto 72px!important;text-transform:uppercase;border-radius:2px;line-height:28px!important;}h1:before,h1:after{content:"";position:absolute;display:block;top:-6px;border:18px solid #dad4ff;}h1:before{left:-36px;border-right-width:18px;border-left-color:transparent;}h1:after{right:-36px;border-left-width:18px;border-right-color:transparent;}h1 span:before,h1 span:after{content:"";position:absolute;display:block;border-style:solid;border-color:#A7CECC transparent transparent transparent;top:-6px;transform:rotate(180deg);}h1 span:before{left:0;border-width:6px 0 0 6px;}h1 span:after{right:0;border-width:6px 6px 0 0;}.ribbon{display:inline-block;width:48%;height:188px;position:relative;float:left;margin-bottom:30px;background-size:cover;color:white;}.ribbon span{font-size:14px;}
.Back-img1{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZ9xrAITNe7jHM8AGRPtgXazMLx_uuCcnXolbyZQORMFtRVmcwL3c8Vm_Eg1U1Pp7eSE33f1n7FB-JLWxvL5QuLv8tTCrZ43KdnPplDpwKa84-H1whwjyl9yZk68Rfu2Lp9L2W5vZL2I/s0/unplug-themesgadget-demo-style-6-1.webp);
}
.Back-img2{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5tYzUMe4bHr6gY2xDzT1c1yTZlKQprkHSezkv7cNokI42gDhay9R6DDfxlERlKUA93jsSsNhGBJnmofBj6rLl-yNgalxSYzQdezlL7QCqmQwX91tqaFRMS9NmCUnRlt7p1m_Ny3IXeXQ/s0/unplug-themesgadget-demo-style-6-2.webp);
}
.Back-img3{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcii5bno4WpQVLKwpkF12nm65dZi6iygeomRDhFhCzDEfHOW973NZ5N3Jc3xIkxO7zl9qYXKtbiKdCecRUXUPaPK4RojN4sLB9X5JZ2_i3tgr3JVNBM-oPIxCzaLEi3l-Bj7__zCSyPKQ/s0/unplug-themesgadget-demo-style-6-3.webp);
}
.Back-img4{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx8Nvs9tyBQ9b_pP-YEEBSct7tu5ATggERmKaQQ08cdt1ISoQgsTOQcr2b3HYIuSMNZT1jWam81ios0N5sT5I6glJWmlzqKDApNo0XaH7Edn3sLEdp0z4tqMsy2NfHnCo2wCWtqFJnXj0/s0/unplug-themesgadget-demo-style-6-4.webp);
}
.Back-img5{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm3HCYHMV3DwOsO3yimgAAxn7b0pjPgO-Yt3eoEER7f5hHpfX_BSdpSNaHpLbZ3zDuZQ7atGjye9_elxizM7-d3U3LrxQf-k9i9ehWThB_Z4ePLMBkYKmaHs44bXMk2qoBV0BI02HWqfQ/s0/unplug-themesgadget-demo-style-6-5.webp);
}
.Back-img6{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeHdhsBa0Xw2AbOv-zKdmtnNoenXMs8HTdY8oONW5GorQ9Bo7n9Zf5z0bkbCRU2GFtEOELG3gV5fF7oq31L2DjiGSXe3Zj4GWPXf22ZV0SCJxH1VM6rd-9s_9EfsUL-J92FziBes94yW8/s0/unplug-themesgadget-demo-style-6-6.webp);
}
.Back-img1, .Back-img2, .Back-img3, .Back-img4, .Back-img5, .Back-img6{background-size: cover;}.ribbon:nth-child(even){margin-right:4%;}@media (max-width:500px){.ribbon{width:100%}.ribbon:nth-child(even){margin-right:0%;}}
.ribbon1{position:absolute;top:-6px;right:10px;}.ribbon1:after{position:absolute;content:"";display:block;width:0;height:0;border-left:53px solid transparent;border-right:53px solid transparent;border-top:10px solid #8775f5;}.ribbon1 span{position:relative;display:inline-block;text-align:center;background:#8775f5;font-size:14px;line-height:1;padding:12px 8px 10px;border-top-right-radius:8px;width:90px;}.ribbon1 span:before,.ribbon1 span:after{position:absolute;content:"";display:block;}.ribbon1 span:before{background:#8775f5;height:6px;width:6px;left:-6px;top:0;}.ribbon1 span:after{background:#8775f5;height:6px;width:8px;border-radius:8px 8px 0 0;left:-8px;top:0;}
.ribbon2{display:inline-block;width:60px;padding:10px 0;background:#309ba3;top:-6px;left:25px;position:absolute;text-align:center;border-top-left-radius:3px;line-height:normal;}.ribbon2:before{height:0;width:0;border-bottom:6px solid #309ba3;border-right:6px solid transparent;right:-6px;top:0;}.ribbon2:before,.ribbon2:after{content:"";position:absolute;}.ribbon2:after{height:0;width:0;border-left:30px solid #309ba3;border-right:30px solid #309ba3;border-bottom:30px solid transparent;bottom:-30px;left:0;}
.ribbon3{display:inline-block;position:absolute;width:150px;height:50px;line-height:50px;padding-left:15px;background:#93476b;left:-8px;top:20px}.ribbon3:before,.ribbon3:after{content:"";position:absolute;}.ribbon3:before{height:0;width:0;border-bottom:8px solid #93476b;border-left:8px solid transparent;top:-8px;left:0;}.ribbon3:after{height:0;width:0;border-top:25px solid transparent;border-bottom:25px solid transparent;border-left:15px solid #93476b;right:-15px;}
.ribbon4{position:absolute;top:15px;padding:8px 10px;background:#555f8d;box-shadow:-1px 2px 4px rgba(0,0,0,0.5);}.ribbon4:before,.ribbon4:after{position:absolute;content:"";display:block;}.ribbon4:before{width:7px;height:100%;padding:0 0 7px;top:0;left:-7px;background:inherit;border-radius:5px 0 0 5px;}.ribbon4:after{width:5px;height:5px;background:rgba(0,0,0,0.35);bottom:-5px;left:-5px;border-radius:5px 0 0 5px;}
.ribbon5{display:inline-block;width:calc(100% + 20px);height:50px;line-height:50px;text-align:center;margin-left:-10px;margin-right:-10px;background:#556c83;position:relative;top:20px;}.ribbon5:before{content:"";position:absolute;height:0;width:0;border-top:10px solid #556c83;border-left:10px solid transparent;bottom:-10px;left:0;}.ribbon5:after{content:"";position:absolute;height:0;width:0;border-top:10px solid #556c83;border-right:10px solid transparent;right:0;bottom:-10px;}.wrap{width:100%;height:188px;position:absolute;top:-8px;left:8px;overflow:hidden;}.wrap:before{content:"";display:block;border-radius:8px 8px 0px 0px;width:40px;height:8px;position:absolute;right:100px;background:#5788a1;}.wrap:after{content:"";display:block;border-radius:0px 8px 8px 0px;width:8px;height:40px;position:absolute;right:0px;top:100px;background:#5788a1;}
.ribbon6{display:inline-block;text-align:center;width:200px;height:40px;line-height:40px;position:absolute;top:30px;right:-50px;z-index:2;overflow:hidden;transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);border:1px dashed;box-shadow:0 0 0 3px #5788a1,0px 21px 5px -18px rgba(0,0,0,0.6);background:#5788a1;}
</style>
Conclusion
The corner ribbon is a CSS-based decoration for blog layouts. It is a great way to add some originality to your site and enhance your overall website appearance. The CSS Corner Ribbon was designed to be used in blogs with a simple layout.
The advantage of the CSS Corner Ribbon is that it can be used for both horizontal and vertical layouts. The design does not require any extra coding, thus making it very easy to create and use.
However, making a simple CSS corner ribbon can be quite challenging for novice bloggers and designers alike. But no worries! I’ll have shown you how to make your very own perfect and professional-looking CSS corner ribbon in just five minutes and show you how easy it is to achieve it!
We hope that this post helped you make a CSS corner ribbon on your blogger website. Do let us know if you have any other questions regarding dropdown menus. You can get in touch with us via our contact form or telegram.