Skip to content

Instantly share code, notes, and snippets.

@Jaswetz

Jaswetz/dabblet.css

Created January 10, 2013 20:11
Show Gist options
  • Save Jaswetz/4505390 to your computer and use it in GitHub Desktop.
Save Jaswetz/4505390 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
body
{
background: seaShell;
position: relative
}
.tip-shape
{
position: absolute;
top: 50px;
left: 50px;
width: 10px;
height: 10px;
border-radius: 20px;
background: linear-gradient(top, tomato, #ff8e7a);
box-shadow: 0 1px 1px 0 rgba(255,255,255,.5) inset, 0 -1px 1px 0 rgba(0,0,0,.2) inset, 0 2px 3px 0px rgba(51,51,51,.3);
border: 1px solid #e37663;
}
.tip-glow
{
position: absolute;
top: 36px;
left: 36px;
width: 35px;
height: 35px;
border-radius: 20px;
background: rgba(255, 99, 71, .5);
border: 3px solid tomato;
animation: blip 2s 0s ease-in-out infinite;
opacity: 0;
}
@keyframes blip
{
0%
{
-webkit-transform: scale(.1);
opacity: 0;
}
1%
{
-webkit-transform: scale(.1);
opacity: .6;
}
60%
{
opacity: 0;
-webkit-transform: scale(1);
}
100%
{
opacity: 0;
-webkit-transform: scale(1);
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="tip-glow"></div>
<div class="tip-shape"></div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment