How to Design a CSS Ribbon

Middle part of ribbon

Hello friends today we gonna learn about How to Design a CSS Ribbon. So read this article, How to Design a CSS Ribbon step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

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.

back to menu ↑

HTML and basic styles

First we make one

HTML element we will look at later add the ribbon designWe put it in one

tag that we mark with the .card selector containing a rectangular box will hold the ribbon wrap around

We also have the basic dimensions and the Background colour with CSS.

.card {background color: beige; height: 300px; margin: 40px; width: 500px;}

back to menu ↑

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:

Center the ribbon

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:

Center section of ribbon centered

back to menu ↑

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:

Sides added to ribbon

Skew the sides

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

Ribbon with crooked sides

Align the sides

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.

Right-angled triangle

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.

Sides of the ribbon aligned

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.

Final    ribbon

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.

back to menu ↑

How to Design a CSS Ribbon: benefits

  • The How to Design a CSS Ribbon tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Design a CSS Ribbon guide is free.

back to menu ↑

Faq

Tutorial summary of How to Design a CSS Ribbon

In this guide, we told you about the How to Design a CSS Ribbon; please read all steps so that you understand How to Design a CSS Ribbon in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Design a CSS Ribbon, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Design a CSS Ribbon tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

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.

Compsmag
Logo
Shopping cart