Created
January 26, 2012 19:38
-
-
Save jackarmley/1684614 to your computer and use it in GitHub Desktop.
Pure CSS3 "Chrevron style" breadcrumb nav
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
| /** | |
| *Pure CSS3 "Chrevron style" breadcrumb nav | |
| By Jack Armley (jackarmley.com) | |
| == | |
| Gradient permalinks: | |
| -ul == http://www.colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+50,d1d1d1+51,fefefe+100;Grey+Gloss+%231 | |
| -li a:after == http://www.colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+50,d1d1d1+51,fefefe+100;Grey+Gloss+%231 | |
| -li:last-child a == http://www.colorzilla.com/gradient-editor/#9dd53a+0,a1d54f+50,80c217+51,7cbc0a+100;Green+Gloss+%231 | |
| -li:last-child a:after == http://www.colorzilla.com/gradient-editor/#9dd53a+0,a1d54f+50,80c217+51,7cbc0a+100;Green+Gloss+%231 | |
| Demo page: | |
| -http://dabblet.com/result/gist/1684614 | |
| Made for: | |
| -Modern browsers (currently will not degrade too gracefully, but I'd suggest just degrading back to there being no chevron points and solid colours for IE8<) | |
| == | |
| */ | |
| /*Quick reset*/ | |
| *{ | |
| padding:0; | |
| margin:0; | |
| } | |
| /*A few global styles for demo page*/ | |
| html{ | |
| background:#fff; | |
| } | |
| body{ | |
| width:800px;margin:0 auto; | |
| font:normal 16px/1.5em arial, helvetica, sans-serif; | |
| color:#111; | |
| } | |
| #gl-demo_header{ | |
| border-bottom:1px dotted #ccc; | |
| margin:0 0 2em 0; | |
| padding:1.5em 0; | |
| text-align:center; | |
| text-shadow:0 1px 0 #fff; | |
| background:#eee; | |
| } | |
| #gl-demo_header h1{ | |
| margin:0 0 0.5em 0; | |
| font:italic 18px/1.2em Georgia, times, serif; | |
| } | |
| #gl-demo_header a{ | |
| color:#539448; | |
| text-decoration:none; | |
| } | |
| /*Styles for breadcrumb nav*/ | |
| ul{ | |
| list-style:none; | |
| display:block; | |
| float:left; | |
| border:1px solid #ccc; | |
| background: rgb(226,226,226); /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */ | |
| background: linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */ | |
| box-shadow:0 0 1px rgba(1,1,1,.1); | |
| } | |
| li{ | |
| display:inline; | |
| } | |
| li a{ | |
| display:block; | |
| float:left; | |
| line-height:2em; | |
| padding:0 3em; | |
| color:#333; | |
| text-decoration:none; | |
| text-shadow:0 1px 0 rgba(255,255,255,.6); | |
| position:relative; | |
| } | |
| li a:after{ | |
| content:" "; | |
| display:block; | |
| width:1.45em; | |
| height:1.45em; | |
| -webkit-transform:rotate(45deg); | |
| -moz-transform:rotate(45deg); | |
| transform:rotate(45deg); | |
| background: rgb(226,226,226); /* Old browsers */ | |
| background: -moz-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* IE10+ */ | |
| background: linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); /* W3C */ | |
| box-shadow:2px -2px 2px rgba(1,1,1,.2); | |
| position:absolute; | |
| top:0.32em; | |
| right:-0.7em; | |
| z-index:1; | |
| } | |
| li:last-child a{ | |
| background: rgb(157,213,58); /* Old browsers */ | |
| background: -moz-linear-gradient(top, rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */ | |
| background: linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */ | |
| color:#fff; | |
| text-shadow:0 -1px 0 rgba(1,1,1,.3); | |
| font-weight:bold; | |
| } | |
| li:last-child a:after{ | |
| box-shadow:none; | |
| border:1px solid #ccc; | |
| right:-0.85em; | |
| top:0.28em; | |
| border-left:none; | |
| border-bottom:none; | |
| background: rgb(157,213,58); /* Old browsers */ | |
| background: -moz-linear-gradient(-45deg, rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6+ */ | |
| background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(157,213,58,1)), color-stop(50%,rgba(161,213,79,1)), color-stop(51%,rgba(128,194,23,1)), color-stop(100%,rgba(124,188,10,1))); /* Chrome,Safari4+ */ | |
| background: -webkit-linear-gradient(-45deg, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10+,Safari5.1+ */ | |
| background: -o-linear-gradient(-45deg, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Opera 11.10+ */ | |
| background: -ms-linear-gradient(-45deg, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* IE10+ */ | |
| background: linear-gradient(-45deg, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C */ | |
| } | |
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
| <!-- content to be placed inside <body>…</body> --> | |
| <div id="gl-demo_header"> | |
| <h1>Pure CSS3 "Chevron Style" breadcrumb nav</h1> | |
| <p>Gist here: <a href="https://gist.github.com/1684614" title="Visit github">gist.github.com/1684614</a></p> | |
| </div> | |
| <ul class="mod-breadcrumb"> | |
| <li><a href="">Home</a></li> | |
| <li><a href="">Articles</a></li> | |
| <li><a href="">CSS3 breadcrumb nav</a></li> | |
| </ul> |
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
| {"view":"split","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Dabblet preview here:
http://dabblet.com/result/gist/1684614