Skip to content

Instantly share code, notes, and snippets.

@ipetepete

ipetepete/dabblet.css

Created January 21, 2013 21:51
Show Gist options
  • Save ipetepete/4589817 to your computer and use it in GitHub Desktop.
Save ipetepete/4589817 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Percentage infographic
Raw
dabblet.css
/**
* CSS Percentage infographic
*/
body{
background: #fff;
font-size: 16px;
}
.stats{
background: hsl(253, 34%, 50%);
color: hsl(253, 34%, 86%);
border: 2px solid hsl(253, 34%, 50%);
border-radius: 5px;
height: 2em;
width: 3em;
text-align: center;
line-height: 2em;
font-size: 2em;
position:relative;
}
.stats:after{
content: attr(data-completed);
background: hsl(253, 34%, 100%);
color:hsl(253, 34%, 50%);
display:block;
border-radius: 5px;
height: 50%;
overflow:hidden;
position:absolute;
width:3em;
top:0px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<section class="stats" data-completed="50%">50%</section>
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