Super Cool CSS3/HTML5 3D Ribbon Menu Implementation Tutorial

Today we introduce a very creative css3/html5 menu, the first menu is a streamer shape, looks very elegant, this menu in the personal blog used more, not only neat, but also very personalized. In addition, this menu when the mouse over the menu item, there will be a 3D convex effect, and will change the background color of the menu item, the effect is very cool, you can see this effect from the online demo.

You can also view the online demo here

Let's take a look at the specific process and source code for implementing this CSS3 ribbon menu. Source code is mainly composed of HTML and CSS code, but also relatively simple.

HTML code:

<Divclass= ' Ribbon '><ahref= ' # '><span>Home</span></a><ahref= ' # '><span>About</span></a><ahref= ' # '><span>Services</span></a><ahref= ' # '><span>Contact</span></a></Div>

Look at the HTML code is very simple, a few a tag to the structure of the menu is clearly described, of course, mainly look at the CSS code.

CSS code:

. 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;Display: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:"";position:Absolute;Top:3em; Left:0;Border-right:0.5em Solid #9B8651;Border-bottom:0.5em Solid #fff;}. Ribbon Span:after{content:"";position:Absolute;Top:3em; Right:0;Border-left:0.5em Solid #9B8651;Border-bottom:0.5em Solid #fff;}

Here we once again applied the CSS3: Before and: After Pseudo-class object, set the contents of the menu items before and after, and do a style rendering, the realization of the mouse over the menu items appear convex three-dimensional effect.

Well, it's that simple, you can download the source code to try it, or modify some parameters to see where the mystery is. SOURCE Download >>