Skip to content

Instantly share code, notes, and snippets.

@lhermann

lhermann/dabblet.css

Created November 14, 2012 23:22
Show Gist options
  • Save lhermann/4075555 to your computer and use it in GitHub Desktop.
Save lhermann/4075555 to your computer and use it in GitHub Desktop.
Download ZIP
Horizontal Divider
Raw
dabblet.css
/**
* Horizontal Divider
*/
body {
background: #f2f2f2;
min-height: 100%;
}
#testarea {
margin-left: auto;
margin-right: auto;
width: 400px;
position: relative;
top: 120px;
}
i.divider, i.divider i {
position: relative;
display: block;
height: 1px;
}
i.divider:before, i.divider i:before,
i.divider:after, i.divider i:after {
content: "";
position: absolute;
z-index: 99;
display: block;
height: 1px;
width: 80px;
top: 0px;
}
i.divider:before, i.divider i:before {left: -80px;}
i.divider:after, i.divider i:after {right: -80px;}
i.divider i:before, i.divider i:after {bottom: 0px;}
i.divider {
height: 0px;
padding-top: 1px;
background-color: rgba(0,0,0,.15);
margin: 0 80px 20px;
}
i.divider i {background-color: rgba(255,255,255,1);}
i.divider:before {background-image: linear-gradient(-90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 100%);}
i.divider i:before {background-image: linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
i.divider:after {background-image: linear-gradient(90deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 100%);}
i.divider i:after {background-image: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="testarea">
<i class="divider"><i></i></i>
</div>
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