Skip to content

Instantly share code, notes, and snippets.

@lhermann

lhermann/dabblet.css

Created December 16, 2012 14:54
Show Gist options
  • Save lhermann/4308060 to your computer and use it in GitHub Desktop.
Save lhermann/4308060 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-color: #f2f2f2;
}
#test {
margin-left: auto;
margin-right: auto;
margin-top: 60px;
width: 300px;
height: 400px;
position: relative;
}
/* Vertical Divider */
.v-divider-right, .v-divider-right > span, .v-divider-round {
position: absolute;
top: 0px;
height: 1px;
}
.v-divider-head, .v-divider-body, .v-divider-foot {
position: absolute;
width: 1px;
height: 50px;
}
.v-divider-right:after, .v-divider-right > span:after, .v-divider-head:after, .v-divider-body:after, .v-divider-foot:after {
content:"";
display: block;
width: 5px;
height: 100%;
margin-left: 1px;
}
.v-divider-right:after, .v-divider-right > span:after {
width: 100%;
height: 5px;
margin: 1px 0 0 0;
}
.v-divider-round {
left: 0px;
height: 10px;
width: 10px;
border: 1px solid rgba(0,0,0,.25);
border-right: 0px;
border-bottom: 0px;
border-top-left-radius: 10px;
background-image: radial-gradient(farthest-corner at right bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.18) 70%);
}
.v-divider-right {
width: auto;
left: 11px;
right: 50px;
background-color: rgba(0,0,0,.25);
}
.v-divider-right:after {
background-image: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,0) 100%);
}
.v-divider-right > span {
width: 50px;
right: -50px;
background-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 100%);
}
.v-divider-right > span:after {
background-image: radial-gradient(farthest-corner at left top, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,0) 70%);
}
.v-divider-head {
top: 20px;
background-image: linear-gradient(0deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 100%);
}
.v-divider-head:after {
background-image: radial-gradient(farthest-corner at left bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,0) 70%);
}
.v-divider-body {
height: auto;
top: 70px;
bottom: 25px;
background-color: rgba(0,0,0,.25);
}
.v-divider-round + .v-divider-body {
top: 11px;
}
.v-divider-body:after {
background-image: linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,0) 100%);
}
.v-divider-foot {
bottom: -25px;
background-image: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 100%);
}
.v-divider-foot:after {
background-image: radial-gradient(farthest-corner at left top, rgba(0,0,0,.18) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,0) 70%);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="test">
<!-- Vertical Divider -->
<span class="v-divider-right"><span></span></span>
<span class="v-divider-round"></span>
<span class="v-divider-body"></span>
<span class="v-divider-foot"></span>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment