Introduction to using CSS3 to achieve brilliant Ribbon style menu methods

This is a very beautiful and unique CSS3 menu plug-in, and the ordinary menu, it has the appearance of the Ribbon, while the mouse over the menu item, the menus will be raised, there is a three-dimensional visual effect. Combined with the background of the Web page, this menu is even more three-dimensional. There is a need for front-end designers to study the source code to use this menu plugin, of course, this also requires your browser support CSS3.

Online Demo Source Download

HTML code

<p class= ' ribbon ' ><a href= ' # ' ><span>home</span></a><a href= ' # ' ><span> About</span></a><a href= ' # ' ><span>services</span></a><a href= ' # ' >< Span>contact</span></a></p>

CSS Code

* {/* Basic CSS reset */margin:0; padding:0;} Body {/* These styles has nothing to does with the Ribbon */background:url (dark_wood.png) 0 0 repeat;padding:35px 0 0;margi N:auto;text-align:center;}. Ribbon {display:inline-block;}. Ribbon:after,. Ribbon:before {margin-top:0.5em;content: ""; float:left;border:1.5em solid #fff;}. Ribbon:after {border-right-color:transparent;}. Ribbon:before {border-left-color:transparent;}. Ribbon a:link,. Ribbon a:visited {color: #000; text-decoration:none;float:left;height:3.5em;overflow:hidden;}. Ribbon span {background: #fff;d isplay:inline-block;line-height:3em;padding:0  1em;margin-top:0.5em;position:relative;-webkit-transition:background-color 0.2s, Margin-top 0.2s;  /* saf3.2+, Chrome */-moz-transition:background-color 0.2s, Margin-top 0.2s;  /* ff4+ */-ms-transition:background-color 0.2s, Margin-top 0.2s;  /* IE10 */-o-transition:background-color 0.2s, Margin-top 0.2s; /* Opera 10.5+ */transition:background-color 0.2s, Margin-top 0.2s;}. Ribbon A:hover SPAn {background: #FFD204; margin-top:0;}. Ribbon Span:before {content: "";p osition:absolute;top:3em;left:0;border-right:0.5em solid #9B8651; border-bottom:0. 5em solid #fff;}. Ribbon Span:after {content: "";p osition:absolute;top:3em;right:0;border-left:0.5em solid #9B8651; border-bottom:0. 5em solid #fff;}