Skip to content

Instantly share code, notes, and snippets.

@OllyHodgson

OllyHodgson/CSS 3D toolbar.html

Created March 23, 2011 16:04
Show Gist options
  • Save OllyHodgson/883350 to your computer and use it in GitHub Desktop.
Save OllyHodgson/883350 to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
CSS 3D toolbar.html
<!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