Skip to content

Instantly share code, notes, and snippets.

@alexeyten

alexeyten/dabblet.css

Forked from anonymous/dabblet.css
Created March 30, 2012 07:01
Show Gist options
  • Save alexeyten/2248197 to your computer and use it in GitHub Desktop.
Save alexeyten/2248197 to your computer and use it in GitHub Desktop.
Download ZIP
Candy
Raw
dabblet.css
/**
* Candy
*/
html {
background-color: silver;
background-image: linear-gradient(45deg, gray 25%, transparent 25%, transparent 75%, gray 75%, gray),
linear-gradient(45deg, gray 26%, transparent 26%, transparent 75%, gray 75%, gray);
background-size:20px 20px;
background-position:0 0, 10px 10px;
min-height: 100%;
}
div {
min-height: 100%;
width: 400px;
height: 16px;
margin: 10em 0 0 20em;
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));
background-size: 28px 28px;
transition: background-position 1000s 9999s linear;
background-position: 0 0, 0 0, 0 0;
background-repeat: repeat-x, repeat, repeat;
background-clip: padding-box;
border-radius: 100px;
border: 1px solid rgba(0,0,0,.2);
}
div:hover {
background-position: 0 0, 0 50000px, 0 0;
transition: background-position 1000s 0s linear;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div></div>
Raw
settings.json
{"view":"separate","seethrough":"1","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment