CSS Ribbon

10 posts Page 1 of 1
Contributors
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

CSS Ribbon
comathi
#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
Code: Select all
<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>
CSS
Code: Select all
#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;}
Of course the colors are up to you, just make sure your shadow color is slightly darker than the rest.

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;
User avatar
Dummy1912
VIP - Donator
VIP - Donator
Posts: 1969
Joined: Sat Aug 21, 2010 2:17 pm

Re: CSS Ribbon
Dummy1912
cooll; nice done
thanks for sharing :)
visit us on:


http://www.softpedia.com/get/System/Lau ... -Run.shtml
Check it out ! http://www.softpedia.com/publisher/I-A- ... 90017.html
Check it out ! http://www.softpedia.com/get/Desktop-En ... lock.shtml
User avatar
TADS
VIP - Donator
VIP - Donator
Posts: 45
Joined: Sun Jan 22, 2012 9:06 pm

Re: CSS Ribbon
TADS
There is also something like this... i cant remember where i got the idea from but i used this last yuear for a old site..
ribon.jpg
HTML
Code: Select all
<div class="round1">
<div class="rectangle">
  <h2></h2>
  </div>
<div class="triangle-l"></div>
<div class="triangle-r"></div>
<div class="info">
<p>
</p>
</div>
CSS
Code: Select all
.round1 {
	clear: both;
	margin: 0px auto;
	width: 250px;
background-image: linear-gradient(bottom, rgb(161,164,173) 8%, rgb(235,240,240) 54%);
background-image: -o-linear-gradient(bottom, rgb(161,164,173) 8%, rgb(235,240,240) 54%);
background-image: -moz-linear-gradient(bottom, rgb(161,164,173) 8%, rgb(235,240,240) 54%);
background-image: -webkit-linear-gradient(bottom, rgb(161,164,173) 8%, rgb(235,240,240) 54%);
background-image: -ms-linear-gradient(bottom, rgb(161,164,173) 8%, rgb(235,240,240) 54%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.08, rgb(161,164,173)),
	color-stop(0.54, rgb(235,240,240))
);
	-moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);	
	position: relative; 
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	background: #800000;
	height: 50px;
	width: 280px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
}

.triangle-l {
	border-color: transparent #800000 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; /* displayed under round */
}

.triangle-r {
	border-color: transparent transparent transparent #800000;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 250px;
	top: 35px;
	z-index: -1; /* displayed under round */
}

.info {
	padding: 10px 25px 35px 25px;
}

.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #c4591e;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
}
Hope this helps abit aswell.
You do not have the required permissions to view the files attached to this post.
Oval Racer Series Games - https://ovalgames.co.uk/
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: CSS Ribbon
comathi
Oh, that's very nice as well. It's as though the ribbon wraps around the object. Thanks for sharing cooll;
User avatar
Codex
Coding God
Coding God
Posts: 2028
Joined: Wed Mar 31, 2010 5:50 pm

Re: CSS Ribbon
Codex
Thanks to the legend #comathi :D for his help and thanks for #TADS for showing me another one :P
We shall let the revolution begin.. the revolution for freedom, freedom against censorship. We shall fight in the fields and in the streets, we shall fight in the hills; we shall never surrender
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: CSS Ribbon
Danny
One problem, good luck with the ribbon on ie8 or lower.
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: CSS Ribbon
comathi
Through other projects I've come to the realisation that Internet Explorer wasn't worth my time... I simply don't try to support it.

Whether that's good practice or not I don't know, but I always try to at least get it working on Chrome, Firefox and Opera :)
User avatar
Danny
VIP - Donator
VIP - Donator
Posts: 621
Joined: Sat Oct 30, 2010 8:21 pm

Re: CSS Ribbon
Danny
Okay so you make great products but doesnt work on IE? you know most people still use IE?
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: CSS Ribbon
comathi
Well actually, according to different statistics, Chrome is the most used browser worldwide. With Firefox and Internet Explorer at times in second or third place. And my code does in fact work in Internet Explorer 8. I haven't gotten the chance to test it in earlier versions, though. But anyway, that's beside my point.

Most of the stuff I do is for myself, so I don't really have to make it work on different browsers. Regardless, I always hope someone else can find use in what I do. The code I posted above works in Chrome, Firefox, Opera and and IE 8 and above (I don't know for IE7). IE already being somewhat of a pain to work with and knowing fewer and fewer people use it, I don't really feel like supporting IE 7 to be necessary (IE 6 won't even be supported by Microsoft as of next year).

In short, I don't go to great lengths to support earlier versions of IE (or earlier versions of any browser for that matter, but IE seems to be the most troublesome when it comes to version compatibility), but I do try somewhat to make everything work with the latest browsers cooll;
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: CSS Ribbon
mikethedj4
There's a generator for this - http://www.css3d.net/ribbon-generator/
10 posts Page 1 of 1
Return to “Tutorials”