Skip to content

Instantly share code, notes, and snippets.

@Victa

Victa/canvas.html

Created May 17, 2011 09:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Victa/976195 to your computer and use it in GitHub Desktop.
Save Victa/976195 to your computer and use it in GitHub Desktop.
Download ZIP
Apple-esque toolbar (navbar) CSS3 & canvas
Raw
canvas.html
<!doctype html>
<title>Tabbar canvas</title>
<canvas id="toolbar"></canvas>
<script>
var canvas = document.getElementById("toolbar");
var context = canvas.getContext("2d");
var gradient = context.createLinearGradient(0, 0, 0, 44);
gradient.addColorStop(0,'#2F2F2F');
gradient.addColorStop(0.5,'#151515');
gradient.addColorStop(0.51,'#000000');
gradient.addColorStop(1,'#000000');
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 44);
</script>
Raw
css3.html
<!doctype html>
<title>Tabbar CSS3</title>
<style>
#toolbar {
width: 100%;
height: 44px;
background-color: #000000;
border-top: 1px solid #4B4B4B;
background-image: -moz-linear-gradient(top, #2F2F2F, #151515 50%, #000000 51%, #000000);
background-image: -o-linear-gradient(top, #2F2F2F, #151515 50%, #000000 51%, #000000);
background-image: -WebKit-gradient(linear, 0% 0%, 0% 100%, from(#2F2F2F), color-stop(50%, #151515), color-stop(51%, #000000), to(#000000));
background-image: linear-gradient(top, #2F2F2F, #151515 50%, #000000 51%, #000000);
}
</style>
<div id="toolbar"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment