In my earlier article, we tackled ribbons in CSS. The thought was to create a basic ribbon sample utilizing a single factor and values that permit it to adapt to nevertheless a lot content material it comprises. We established a form with repeating CSS gradients and tailor-cut the ribbon’s ends with clip-path() to finish the sample, then used it and wound up with two ribbon variations: one which stacks vertically with straight strands of ribbons and one other that tweaks the form by introducing pseudo-elements.
If you’re questioning why I’m utilizing 80%, then there isn’t a specific logic to my strategy. It’s as a result of I discovered that masking extra space with the colour and leaving much less house between strains produces a greater outcome for my eye. I may have assigned variables to regulate the house with out touching the core code, however there’s already greater than sufficient complexity happening. So, that’s the reasoning behind the hard-coded worth.
Styling The First Ribbon
We’ll begin with the crimson ribbon from the demo. That is what we’re trying to create:
It could look complicated, however we’ll break it down into a mixture of fundamental shapes.
Stacking Gradients
Let’s begin with the gradient configuration, and beneath is the outcome we’re aiming for. I’m including a little bit of transparency to higher see each gradients.
–c: #d81a14;
padding-inline: .8lh;
background:
/* Gradient 1 */
linear-gradient(var(–c) 80%, #0000 0)
0 .1lh / 100% 1lh,
/* Gradient 2 */
linear-gradient(90deg, color-mix(in srgb, var(–c), #000 35%) 1.6lh, #0000 0)
-.8lh 50% / 100% calc(100% – .3lh) repeat-x;
}
We already know all in regards to the first gradient as a result of we set it up within the final part. The second gradient, nevertheless, is positioned behind the primary one to simulate the folded half. It makes use of the identical colour variable as the primary gradient, but it surely’s blended with black (#000) within the color-mix() perform to darken it a smidge and create depth within the folds.
The factor with the second gradient is that we don’t want it to succeed in the highest and backside of the factor, which is why its top is the same as calc(100% – .3lh).
Observe the use of padding within the inline course, which is required to keep away from textual content operating into the ribbon’s folds.
Masking The Folded Components
Now, it’s time to introduce a CSS masks. For those who look carefully on the design of the ribbon, you’ll discover that we’re chopping triangular shapes from the perimeters.
We’ve got utilized a triangular form on the left and proper sides of the ribbon. Not like the backgrounds, they repeat each two strains, giving us the complicated repetition we wish.
Think about for a second that these elements are clear.
That may give us the ultimate form! We are able to do it with masks, however this time, let’s strive utilizing conic-gradient(), which is sweet as a result of it permits us to create triangular shapes. And since there’s one form on either side, we’ll use two conical gradients — one for the left and one for the suitable — and repeat them within the vertical course.
masks:
conic-gradient(from 225deg at .9lh, #0000 25%, #000 0)
0 1lh / 50% 2lh repeat-y,
conic-gradient(from 45deg at calc(100% – .9lh), #0000 25%, #000 0)
100% 0 / 50% 2lh repeat-y;
Every gradient covers half the width (50%) and takes up two strains of textual content (2lh). Additionally, observe the 1lh offset of the primary gradient, which is what permits us to alternate between the 2 because the ribbon adapts in measurement. It’s just about a zig-zag sample and, guess what, I’ve an article that covers learn how to create zig-zag shapes with CSS masks. I extremely advocate studying that for extra context and observe making use of masks with conical gradients.
Masking The Ribbon’s Ends
We’re virtually completed! All we’re lacking are the ribbon’s minimize edges. That is what now we have thus far:
We are able to fill that in by including a 3rd gradient to the masks:
/* New gradient */
linear-gradient(45deg, #000 50%, #0000 0) 100% .1lh / .8lh .8lh no-repeat,
conic-gradient(from 225deg at .9lh, #0000 25%, #000 0)
0 1lh / 50% 2lh repeat-y,
conic-gradient(from 45deg at calc(100% – .9lh), #0000 25%, #000 0)
100% 0 / 50% 2lh repeat-y;
That linear gradient will give us the lacking half on the prime, however we nonetheless have to do the identical on the backside, and right here, it’s a bit tough as a result of, in contrast to the highest half, the underside will not be static. The cutout may be both on the left or the suitable primarily based on the variety of strains of textual content we’re working with:
We are going to fill in these lacking elements with two extra gradients. Beneath is a demo the place I exploit totally different colours for the newly added gradients to see precisely what’s occurring. Use the resize deal with to see how the ribbon adjusts when the variety of strains adjustments.
Styling The Second Ribbon
The second ribbon from the demo — the inexperienced one — is a variation of the primary ribbon.
I’m going a bit of bit quicker this time round. We’re working with lots of the identical concepts and ideas, however you will note how comparatively straightforward it’s to create variations with this strategy.
The very first thing to do is so as to add some house on the highest and backside for the cutout half. I’m making use of a clear border for this. The thickness must be equal to half the peak of 1 line (.5lh).
–c: #d81a14;
border-block: .5lh stable #0000;
padding-inline: 1lh;
background: linear-gradient(var(–c) 80%, #0000 0) 0 .1lh / 100% 1lh padding-box;
}
Observe how the background gradient is about to cowl solely the padding space utilizing padding-box.
Now, in contrast to the primary ribbon, we’re going to add two extra gradients for the vertical items that create the folded darker areas.
–c: #d81a14;
border-block: .5lh stable #0000;
padding-inline: 1lh;
background:
/* Gradient 1 */
linear-gradient(var(–c) 80%, #0000 0) 0 .1lh / 100% 1lh padding-box,
/* Gradient 2 */
linear-gradient(#0000 50%, color-mix(in srgb, var(–c), #000 35%) 0)
0 0 / .8lh 2lh repeat-y border-box,
/* Gradient 3 */
linear-gradient(color-mix(in srgb, var(–c), #000 35%) 50%, #0000 0)
100% 0 / .8lh 2lh repeat-y border-box;
}
Discover how the final two gradients are set to cowl the whole space with a border-box. The peak of every gradient must equal two strains of textual content (2lh), whereas the width must be per the peak of every horizontal gradient. With this, we set up the folded elements of the ribbon and likewise put together the code for creating the triangular cuts at first and finish of the ribbon.
Right here is an interactive demo the place you’ll be able to resize the container to see how the gradient responds to the variety of strains of textual content.
Making use of solely the conic gradients will even cover the cutout half, so I’ve to introduce a 3rd gradient to verify they continue to be seen:
/* New Gradient */
linear-gradient(#000 1lh, #0000 0) 0 -.5lh,
/* Left Facet */
conic-gradient(from 225deg at .9lh, #0000 25%, #000 0)
0 1lh / 51% 2lh repeat-y padding-box,
/* Proper Facet */
conic-gradient(from 45deg at calc(100% – .9lh), #0000 25%, #000 0)
100% 0 / 51% 2lh repeat-y padding-box;
And the ultimate contact is to make use of clip-path for the cutouts on the ends of the ribbon.
Discover how the clip-path is chopping two triangular parts from the underside to verify the cutout is all the time seen whether or not now we have an odd and even variety of strains.
That is how the ultimate code appears to be like once we put every thing collectively:
–c: #d81a14;
padding-inline: 1lh;
border-block: .5lh stable #0000;
background:
linear-gradient(var(–c) 80%, #0000 0)
0 .1lh / 100% 1lh padding-box,
linear-gradient(#0000 50%, color-mix(in srgb,var(–c), #000 35%) 0)
0 0 / .8lh 2lh repeat-y border-box,
linear-gradient(color-mix(in srgb, var(–c), #000 35%) 50%, #0000 0)
100% 0 / .8lh 2lh repeat-y border-box;
masks:
linear-gradient(#000 1lh, #0000 0) 0 -.5lh,
conic-gradient(from 225deg at .9lh,#0000 25%,#000 0)
0 1lh/51% 2lh repeat-y padding-box,
conic-gradient(from 45deg at calc(100% – .9lh), #0000 25%, #000 0)
100% 0 / 51% 2lh repeat-y padding-box;
clip-path: polygon(0 0, calc(100% – .8lh) 0,
calc(100% – .4lh) .3lh,
100% 0, 100% 100%,
calc(100% – .4lh) calc(100% – .3lh),
calc(100% – .8lh) 100%, .8lh 100%, .4lh calc(100% – .3lh), 0 100%);
}
I challenged you to discover a option to reverse the course of the primary ribbon by adjusting the gradient values. Attempt to do the identical factor right here!
It could sound tough. For those who want a lifeline, you will get the code from my on-line assortment, but it surely’s the right train to know what we’re doing. Explaining issues is sweet, however nothing beats working towards.
The Closing Demo
Right here is the demo as soon as once more to see how every thing comes collectively.
See the Pen Responsive multi-line ribbon shapes by Temani Afif.
Wrapping Up
There we go, two extra ribbons that construct off of those we created collectively in the primary article of this temporary two-part collection. If there’s just one factor you’re taking away from these articles, I hope it’s that fashionable CSS offers us with highly effective instruments that provide totally different, extra sturdy approaches to issues we used to do a very long time in the past. Ribbons are a wonderful instance of a long-living design sample that’s been round lengthy sufficient to show how creating them has developed over time as new CSS options are launched.
I can inform you that the 2 ribbons we created on this article are maybe essentially the most tough shapes in my assortment of ribbon shapes. However when you can wrap your head round using gradients — not just for backgrounds however masks and clipping paths as nicely — you’ll discover which you could create each different ribbon within the assortment with out taking a look at my code. It’s getting over that preliminary hurdle that makes this type of factor difficult.
You now have the instruments to make your individual ribbon patterns, too, so why not give it a strive? For those who do, please share them within the feedback so I can see your work!
Additional Studying On SmashingMag
“Create Responsive Picture Results With CSS Gradients And aspect-ratio,” Stephanie Eckles
“Impressed Design Selections With Alexey Brodovitch,” Andrew Clarke
“Gradients, Mix Modes, And A Actually Cool Hover Impact,” Preethi Sam
“A Deep CSS Dive Into Radial And Conic Gradients,” Ahmad Shadeed
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!