Skip to content

Instantly share code, notes, and snippets.

@alexeyten

alexeyten/dabblet.css

Created March 30, 2012 09:58
Show Gist options
  • Save alexeyten/2250517 to your computer and use it in GitHub Desktop.
Save alexeyten/2250517 to your computer and use it in GitHub Desktop.
Download ZIP
Candy 2
Raw
dabblet.css
/**
* Candy 2
*/
html {
background-color: #eee;
background-image: linear-gradient(45deg, silver 25%, transparent 25%, transparent 75%, silver 75%, silver),
linear-gradient(45deg, silver 26%, transparent 26%, transparent 75%, silver 75%, silver);
background-size:20px 20px;
background-position:0 0, 10px 10px;
min-height: 100%;
}
div {
width: 400px;
height: 16px;
margin: 10em auto;
background-image:
linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.25) 8px, rgba(255,255,255,0) 8px),
repeating-linear-gradient(-45deg, rgba(62,94,207,0.7), rgba(62,94,207,0.7) 10px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 20px, rgba(62,94,207,0.7) 20px),
linear-gradient(rgba(96,148,240,0.5),rgba(178,215,251,0.5)),
linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.3) 2px, transparent 2px);
background-size: 20% 28px;
transition: background-position 1000s 9999s linear,
background-size 3s 0s linear;
background-position: 0 0, 0 0, 0 0, 2px 0;
background-repeat: no-repeat, repeat-y, no-repeat, no-repeat;
background-clip: padding-box;
border-radius: 100px;
border: 1px solid rgba(0,0,0,.2);
}
div:hover {
background-position: 0 0, 0 90000px, 0 0, 2px 0;
background-size: 99% 28px;
transition: background-position 1000s 0s linear,
background-size 10s 0s linear;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div></div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment