Guide: How to Design a CSS Ribbon
We talk about CSS ribbons in web design when a strip of box (called ribbon) packed another boxIt is a reasonably used design technique to decorate text, especially headlines. You can see how well-used CSS ribbons can help on the W3C website structure content in a subtle way. So in this post, we are going to see how to create a simple CSS ribbon you can use improve the headings on your website. Thanks to CSS transformationswe can create this design with a much simpler code base than before. You can take a look at the final demo below. See Compsmag’s Pen CSS ribbon (@hkdc) on CodePen.
HTML and basic styles
First we make one .card {background color: beige; height: 300px; margin: 40px; width: 500px;}
The middle part of the ribbon
We use one CSS variable (allows us to save and reuse a CSS value) called –p to save the padding valueThe value of the padding property uses the var (–p) syntax for the left and right fills of the ribbon so that it can be easily widenedThe variable –p will be later reused several timesThat makes our code flexible. .ribbon {–p: 15px; background color: rgb (170,170,170); height: 60px; padding: 0 var (–p); width: 100%;} In the screenshot below you can see what your demo should look like at this point: We must too center the ribbonWe push it to the left through the fill size (marked by the variable –p) using relative positioning. .ribbon {–p: 15px; background color: rgb (170,170,170); height: 60px; padding: 0 var (–p); position: relative; right: var (–p); width: 100%;} The updated demo:
The sides of the ribbon
Now we make it left and right sides of the ribbon which should seemingly curve around the card edge. We use both the: before and: after pseudo-elements of .ribbon. Both pseudo elements inherit the background color from .ribbon, and we use the filter: brightness (.5) line to make their color a bit darker. They are too absolutely positioned within their (relatively positioned) parent. Their width must be the same as the fill size, and we post them on the left and right sides of the ribbon using the style rules left: 0 and right: 0. .ribbon: before, .ribbon: after {background-color: inherit; content: ”; display: block; filter: brightness (.5); height: 100%; position: absolute; width: var (–p);}. ribbon: for {left: 0;}. ribbon: after {right: 0;} Now the ribbon with the sides we just added looks like this:
To make the sides of the ribbon look bent, we have to slides the sides 45 °The transformation: skewy () CSS rule skew elements vertically .ribbon: before {left: 0; transform: skewy (45deg);}. ribbon: after {right: 0; transform: skewy (-45deg);} As you can see from the edges of the sides do not align after the transformation, so we must pull them down
To determine the correct length with which we have to move the sides down, we go to trigonometry. What we need to find is xsince y is the width of the sides (equal to the padding dimension of .ribbon) and the angle θ is 45 ° (the angle of the skew). The resulting x then should be halved, since there are also left and right sides.
If you are using a CSS preprocessor check if it has a tan function, or else refer to a tangent graph or calculator to find out the tangent value of the angleWe’re lucky, because tan 45 ° is 1, which means the value of x is equal to y in our case. .ribbon: before, .ribbon: after {background-color: inherit; content: ”; display: block; filter: brightness (.5); height: 100%; position: absolute; top: calc (var (–p) / 2); width: var (–p);} Since x had to be halved, we use the calc () CSS function to do the division of the –p variable.
Finally we have to align the sides along the z axis so let’s add the z-index: -1 line to the sides at place them behind the center section of the ribbon .ribbon: before, .ribbon: after {background-color: inherit; content: ”; display: block; filter: brightness (.5); height: 100%; position: absolute; top: calc (var (–p) / 2); width: var (–p); z-index: -1;} Now that we’ve aligned the sides, our CSS ribbon is ready.
Below you can watch the live demo again, keep in mind that some extra stylings are also used. See Compsmag’s Pen CSS ribbon (@hkdc) on CodePen.
How to Design a CSS Ribbon: benefits
Faq
Final note
I hope you like the guide How to Design a CSS Ribbon. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Design a CSS Ribbon, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Design a CSS Ribbon”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Design a CSS Ribbon, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
