Skip to content

Instantly share code, notes, and snippets.

@pehaa

pehaa/dabblet.css

Last active August 29, 2015 14:27
Show Gist options
  • Save pehaa/2985bb998c76b2633d31 to your computer and use it in GitHub Desktop.
Save pehaa/2985bb998c76b2633d31 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
body {background: #f06; overflow: hidden;text-align:center;
min-height: 100%;}
.star {
opacity:1;
color:white;
position:relative;
display:inline-block;
text-align:center;
}
.star span{opacity:.25;}
.second {position:absolute; left:0; right:0; background:green; }
.star:after, .star:before {
content:attr(data-star);
left:0;
position:absolute;
display:inline-block;
overflow:hidden;
transition:1s .2s;
}
.star:after {
opacity:1;
width:0;
transition:.5s .15s;
}
.star:before {transition:1s 0s;opacity:.6; width:100%;}
.star:hover:after {width:100%;}
.star:hover:before {width:0%;}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<h1 class="star" data-star="Title"><span>Title</span></h1>
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