Skip to content

Instantly share code, notes, and snippets.

@sambauers

sambauers/toolbar-slip.html

Last active August 29, 2015 14:09
Show Gist options
  • Save sambauers/1b5f4564355f3463fe7a to your computer and use it in GitHub Desktop.
Save sambauers/1b5f4564355f3463fe7a to your computer and use it in GitHub Desktop.
Download ZIP
Add a solid rainbow background to the OS X Yosemite Safari toolbar (on scroll)
Raw
toolbar-slip.html
<!DOCTYPE html>
<html>
<head>
<style>
.toolbar-slip {
position: fixed;
top: -600px;
left: 0;
height: 600px;
width: 100%;
padding-bottom: 1px;
background-clip: content-box;
background-color: red;
}
#green {
background-color: green;
width: 25%;
}
#red {
background-color: red;
width: 25%;
left: 25%;
}
#blue {
background-color: blue;
width:25%;
left: 50%;
}
#yellow {
background-color: yellow;
width: 25%;
left: 75%;
}
p {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="green" class="toolbar-slip"></div>
<div id="red" class="toolbar-slip"></div>
<div id="blue" class="toolbar-slip"></div>
<div id="yellow" class="toolbar-slip"></div>
<h1>Scroll down to see the Safari toolbar turn rainbow-ish.</h1>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
<p>down</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment