/CSS 3D toolbar.html
Created Mar 23, 2011
A CSS 3D toolbar style, based on my CSS buttons (https://gist.github.com/883309). Tested in IE6-9, Firefox 3.6-4, Chrome 11, Safari 5, Opera 11.
| <!DOCTYPE html> | |
| <!--[if lt IE 7 ]><html class="ie6"><![endif]--> | |
| <!--[if IE 7 ]><html class="ie7"><![endif]--> | |
| <!--[if IE 8 ]><html class="ie8"><![endif]--> | |
| <!--[if IE 9 ]><html class="ie9"><![endif]--> | |
| <!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]--> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta charset="utf-8"> | |
| <title>CSS Toolbar</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=auto"> | |
| <style> | |
| body { | |
| font-family: Helmet, Freesans, sans-serif; /* See http://blog.mhurrell.co.uk/post/2946358183 */ | |
| font-size: 12px; | |
| line-height: 1.4; | |
| background-color: #fafafa; | |
| color: #5a5b5d; | |
| padding: 5em; | |
| margin: 0; | |
| vertical-align: baseline; | |
| } | |
| /* .toolbar | |
| A CSS 3D toolbar style, based on my CSS buttons (https://gist.github.com/883309) | |
| Tested in IE6-9, Firefox 3.6-4, Chrome 11, Safari 5, Opera 11. | |
| */ | |
| .toolbar { | |
| display: inline-block; | |
| vertical-align: bottom; | |
| white-space: nowrap; | |
| padding: 5px; | |
| background-color: #f4f4f4; | |
| } | |
| /* Make IE6/7 do inline-block */ | |
| .ie6 .toolbar, | |
| .ie7 .toolbar { | |
| display: inline; | |
| zoom: 1; | |
| } | |
| .toolbar a, | |
| .toolbar a:link, | |
| .toolbar a:visited { | |
| display: inline-block; | |
| vertical-align: bottom; | |
| font-size: 1.083333em; | |
| text-align: center; | |
| text-decoration: none; | |
| padding: 6px 14px; | |
| margin: 0; | |
| /* Create a subtly embossed border */ | |
| border-width: 1px 1px 1px 0; | |
| border-style: solid; | |
| border-color: #C4C3BB #A4A399 #A4A399 #C4C3BB; | |
| /* Use a background-image, then overlay a gradient if available. | |
| Notes: | |
| - I've applied graidents to IE9 separately. | |
| - The .png contains two gradients for normal and hover states | |
| - The .png is on http://imgur.com/x2Ckw, but you probably want to host it locally | |
| - For IE6 I used TweakPNG to set the .png's bKGD chunk to match the button background | |
| */ | |
| background: #dadada url(http://i.imgur.com/x2Ckw.png) repeat-x 0 0; /* Should be #dedede but IE renders the PNG slightly darker, hence #dadada */ | |
| background-image: -o-linear-gradient(-90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%); | |
| background-image: -moz-linear-gradient(-90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%); | |
| background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.05, #F5F5F5), color-stop(0.95, #DEDEDE), to(#CCCCCC)); | |
| background-image: linear-gradient(-90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%); | |
| color: #272728; | |
| text-shadow: 1px 1px 0 #FAFAFA; | |
| /* Enhance the embossing if available */ | |
| -moz-box-shadow: -1px -1px 0 #CCCCCC inset; | |
| -webkit-box-shadow: -1px -1px 0 #CCCCCC inset; | |
| box-shadow: -1px -1px 0 #CCCCCC inset; | |
| /* Fix a border-radius colour bleed issue in Chrome */ | |
| -webkit-background-clip: padding-box; | |
| } | |
| /* Put rounded corners on the first and last links in the toolbar */ | |
| .toolbar a:first-child, | |
| .toolbar a:first-child:link, | |
| .toolbar a:first-child:visited { | |
| border-left-width: 1px; | |
| /* Because slightly rounded corners are de-rigeur */ | |
| -moz-border-radius: 2px 0 0 2px; | |
| -webkit-border-radius: 2px 0 0 2px; | |
| border-radius: 2px 0 0 2px; | |
| } | |
| .toolbar a:last-child, | |
| .toolbar a:last-child:link, | |
| .toolbar a:last-child:visited { | |
| /* Because slightly rounded corners are de-rigeur */ | |
| -moz-border-radius: 0 2px 2px 0; | |
| -webkit-border-radius: 0 2px 2px 0; | |
| border-radius: 0 2px 2px 0; | |
| } | |
| .toolbar a:hover, | |
| .toolbar a:active, | |
| .toolbar a:focus { | |
| /* Move the text slightly to make the button appear pressed */ | |
| padding: 7px 13px 5px 15px; | |
| /* Invert the gradient to make the button appear pressed */ | |
| background-position: bottom left; | |
| background-image: -o-linear-gradient(90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%); | |
| background-image: -moz-linear-gradient(90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%); | |
| background-image: -webkit-gradient(linear, left bottom, left top, from(#FFFFFF), color-stop(0.05, #F5F5F5), color-stop(0.95, #DEDEDE), to(#CCCCCC)); | |
| background-image: linear-gradient(90deg, #FFFFFF 3%, #F5F5F5 3%, #DEDEDE 99%, #CCCCCC 99%); | |
| color: #181818; | |
| /* Invert the emboss effect */ | |
| border-color: #A4A399 #C4C3BB #C4C3BB #A4A399; | |
| -moz-box-shadow: 1px 1px 0 #CCCCCC inset; | |
| -webkit-box-shadow: 1px 1px 0 #CCCCCC inset; | |
| box-shadow: 1px 1px 0 #CCCCCC inset; | |
| } | |
| /* Hello keyboard users! */ | |
| .toolbar a:active, | |
| .toolbar a:focus { | |
| outline: 1px dotted #DEDDD8; | |
| } | |
| /* Gradients for IE9 | |
| YAY! The filters don't break ClearType anymore! Alas | |
| they don't play nicely with border-radius so any more | |
| than about 2px looks ming. | |
| */ | |
| .ie9 .toolbar a, | |
| .ie9 .toolbar a:link, | |
| .ie9 .toolbar a:visited { | |
| background-image: none; | |
| -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC')"; | |
| } | |
| .ie9 .toolbar a:hover, | |
| .ie9 .toolbar a:active, | |
| .ie9 .toolbar a:focus { | |
| -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#F5F5F5')"; | |
| } | |
| /* Because IE6 doesn't support :first-child */ | |
| .ie6 .toolbar a.first-child, | |
| .ie6 .toolbar a.first-child:link, | |
| .ie6 .toolbar a.first-child:visited { | |
| border-left-width: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>CSS toolbar!</h1> | |
| <p>Here's a CSS toolbar, based on <a href="https://gist.github.com/883309" title="Visit github gist: 883309 [External Site]" rel="external">my CSS buttons</a>! View source to see how they're made.</p> | |
| <p class="toolbar"><a class="button first-child" href="/">Make things happen</a><a class="button" href="/">Do stuff</a><a class="button" href="/">Wibble</a></p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment