Skip to content

Instantly share code, notes, and snippets.

@nielsdoorn

nielsdoorn/dabblet.css

Created December 20, 2011 19:27
Show Gist options
  • Save nielsdoorn/1502856 to your computer and use it in GitHub Desktop.
Save nielsdoorn/1502856 to your computer and use it in GitHub Desktop.
Download ZIP
A small first experiment
Raw
dabblet.css
/**
* A small first experiment
*/
@keyframes fooanim {
0% {width:100px;height:100px;left:50px;top:50px; }
50% {width:150px;height:150px;left:25px;top:25px;line-height:150px; }
100% {width:100px;height:100px;left:50px;top:50px; }
}
@keyframes baranim {
0% {width:100px;left:300px;}
50% {width:150px;left:275px; }
100% {width:100px;left:300px; }
}
div {
padding:20px;
border-radius:10px;
line-height:100px;
text-align:center;
width:100px;
height:100px;
position:absolute;
}
div#foo:hover {
animation-name: fooanim;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-duration: 2s;
animation-fill-mode:both;
}
div#bar:hover {
animation-name: baranim;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-duration: 2s;
animation-fill-mode:both;
}
div#foo {
background: #f06;
background: linear-gradient(45deg, blue, green);
border: 1px solid red;
font-family:serif;
font-size:20pt;
margin-right:10px;
font-weight:bold;
color:white;
left: 50px;
top:50px;
}
div#bar {
background: #f06;
background: linear-gradient(45deg, green, blue);
border: 1px solid red;
font-family:sans-serif;
font-size:24pt;
left:300px;
top:50px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="foo">Foo</div>
<div id="bar">Bar</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment