Created
August 15, 2012 13:06
-
-
Save kddawson/3359951 to your computer and use it in GitHub Desktop.
A CSS3 nav ribbon sans images
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Multicelldesign CSS Ribbon</title> | |
| <!-- Don't forget to add an HTML5 polyfill for IE --> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <nav role="navigation" aria-label="main menu"> | |
| <ul role="menu"> | |
| <li role="menuitem"><a href="#">Home</a></li> | |
| <li role="menuitem"><a href="#">Visit Us</a></li> | |
| <li role="menuitem"><a href="#">What’s on</a></li> | |
| <li role="menuitem"><a href="#">Contact Us</a></li> | |
| </ul> | |
| </nav> | |
| <p>No images were harmed in the making of this CSS ribbon. The menu is also marked up with ARIA roles to enhance web accessibility.</p> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font: 16px/1.5 Arial, Helvetica, sans-serif; | |
| } | |
| .wrapper { | |
| width: 960px; | |
| background: #f2f2f2; | |
| margin: 0 auto; | |
| } | |
| nav[role=navigation] { | |
| position: relative; | |
| background: #003055; | |
| border-left: 1px solid #001d33; | |
| border-right: 1px solid #001d33; | |
| -moz-box-shadow: 0 2px 0 rgba(0,0,0,0.2); | |
| -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.2); | |
| box-shadow: 0 2px 0 rgba(0,0,0,0.2); | |
| margin: 0 -11px; | |
| padding: 5px 20px; | |
| } | |
| /* These 2 selectors are the meat and potatoes of this example */ | |
| nav[role=navigation]:before { | |
| content: ""; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 0; | |
| width: 0; | |
| height: 0; | |
| border: 5px solid #001322; | |
| border-bottom: 5px solid transparent; | |
| border-left: 5px solid transparent; | |
| crop: rect(0,5px,5px,0); | |
| } | |
| nav[role=navigation]:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -10px; | |
| right: 0; | |
| width: 0; | |
| height: 0; | |
| border: 5px solid #001322; | |
| border-bottom: 5px solid transparent; | |
| border-right: 5px solid transparent; | |
| crop: rect(0,5px,5px,0); | |
| } | |
| ul { | |
| margin: 0; | |
| } | |
| li { | |
| display: inline; | |
| } | |
| a { | |
| color: #fff; | |
| border-right: 1px solid #999; | |
| text-decoration: none; | |
| text-shadow: 0 -1px #001d33, 0 1px #001322; | |
| padding: 0 .5em; | |
| } | |
| a:hover,a:focus,a:active { | |
| background-color: #003055; | |
| -moz-border-radius: 0; | |
| -webkit-border-radius: 0; | |
| border-radius: 0; | |
| text-decoration: underline; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment