CSS Ribbon
Posted: Tue Jul 16, 2013 9:42 pm
#Codex wanted a ribbon design for some website he's working on, so I decided I'd try to make it myself, using only HTML and CSS3, and most importantly, using absolutely no images.
![Image]()
It's not much, and I guess you could consider this more of a snippet than a tutorial, but I thought I'd share it with you guys... you never know when it could be useful ;)
After carefully analyzing ribbon designs throughout the Web (lol), I've concluded a basic ribbon comprised of the following three things:
[*]The ribbon itself
[*]Two "folded" ribbon pieces at either end of the ribbon
[*]A shadow that would give the illusion of a fold in the ribbon
This means we can design a ribbon using only three elements: ribbon, ribbon-end and ribbon-shadow. CSS classes make it easy to style everything.
HTML
Quick overview of the CSS
[*]We position ribbon-end absolutely so that we can offset it by a few pixels from the main ribbon, creating more of a fold effect. Since the ribbon is positionned relatively, the ribbon ends will still be inside the main ribbon. Furthermore, we set it's z-index to a very low number to make sure it'll appear behind the main ribbon.
[*]The left and right classes are just side-dependant styles, since the ribbon end and the left and the one on the right have different positions.
[*]By playing around with the borders of an element whose size is 0, we can create rectangular shapes, which will serve as a shadow. These are positionned relatively inside the ribbon-end.
Usually, ribbons contain the navigation bar, so of course you could add an unordered list inside the ribbon element and style it as you wish cooll;
It's not much, and I guess you could consider this more of a snippet than a tutorial, but I thought I'd share it with you guys... you never know when it could be useful ;)
After carefully analyzing ribbon designs throughout the Web (lol), I've concluded a basic ribbon comprised of the following three things:
[*]The ribbon itself
[*]Two "folded" ribbon pieces at either end of the ribbon
[*]A shadow that would give the illusion of a fold in the ribbon
This means we can design a ribbon using only three elements: ribbon, ribbon-end and ribbon-shadow. CSS classes make it easy to style everything.
HTML
Code: Select all
CSS
<div id="ribbon">
<div class="ribbon-end left">
<div class="ribbon-shadow left"></div>
</div>
<div class="ribbon-end right">
<div class="ribbon-shadow right"></div>
</div>
</div>
Code: Select all
Of course the colors are up to you, just make sure your shadow color is slightly darker than the rest.#ribbon { width: 1000px; height: 50px; background: #7c1616; position: relative; margin-top: 100px;}
.ribbon-end { width: 100px; height: 50px; background: #7c1616; position: absolute; top: 20px; z-index: -9999;}
.ribbon-end.left { left: -75px;}
.ribbon-end.right { right: -75px;}
.ribbon-shadow { width: 0; height: 0; border-top: 20px solid #501616; border-bottom: 27px solid transparent; position: relative; top: 30px;}
.ribbon-shadow.left { border-left: 27px solid transparent; left: 73px;}
.ribbon-shadow.right { border-right: 27px solid transparent; left: 0;}
Quick overview of the CSS
[*]We position ribbon-end absolutely so that we can offset it by a few pixels from the main ribbon, creating more of a fold effect. Since the ribbon is positionned relatively, the ribbon ends will still be inside the main ribbon. Furthermore, we set it's z-index to a very low number to make sure it'll appear behind the main ribbon.
[*]The left and right classes are just side-dependant styles, since the ribbon end and the left and the one on the right have different positions.
[*]By playing around with the borders of an element whose size is 0, we can create rectangular shapes, which will serve as a shadow. These are positionned relatively inside the ribbon-end.
Usually, ribbons contain the navigation bar, so of course you could add an unordered list inside the ribbon element and style it as you wish cooll;
for his help and thanks for #TADS for showing me another one :P