Super Cool CSS3/HTML5 3D Ribbon Menu Implementation Tutorial

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.