Breadcrumbs

[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.



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;

[Dummy1912]

cooll; nice done
thanks for sharing

[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.

[comathi]

Oh, that's very nice as well. It's as though the ribbon wraps around the object. Thanks for sharing cooll;

[Codex]

Thanks to the legend #comathi for his help and thanks for #TADS for showing me another one :P

[Danny]

One problem, good luck with the ribbon on ie8 or lower.

[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

[Danny]

Okay so you make great products but doesnt work on IE? you know most people still use IE?

[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;

[mikethedj4]

There's a generator for this - http://www.css3d.net/ribbon-generator/