Skip to content

Instantly share code, notes, and snippets.

@kizu

kizu/dabblet.css

Created October 4, 2012 09:40
Download ZIP
No flexbox here
Raw
dabblet.css
/* No flexbox here */
.wrapper {
background: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.4));
overflow: hidden;
margin: 0 0 1em;
border-radius: 1em;
}
.pane {
background: linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.9));
padding: 0.5em;
}
.pane_center {
overflow: hidden;
margin: 0.25em 0;
}
.pane__content {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.pane_left {
float: left;
margin: 0.25em;
border-radius: 0.75em 0 0 0.75em;
}
.pane_right {
float: right;
margin: 0.25em;
border-radius: 0 0.75em 0.75em 0;
}
Raw
dabblet.html
<h1>No flexbox here</h1>
<div class="wrapper">
<div class="pane pane_left">something on the left</div>
<div class="pane pane_right">and on the right</div>
<div class="pane pane_center">
<div class="pane__content">
blah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blahblah blah
</div>
</div>
</div>
<div class="wrapper">
<div class="pane pane_left">something</div>
<div class="pane pane_right">the right</div>
<div class="pane pane_center">
<div class="pane__content">
blah blahblah blah blahblah blah blahblah
</div>
</div>
</div>
<div class="wrapper">
<div class="pane pane_left">somethinggg</div>
<div class="pane pane_right">the right lalala</div>
<div class="pane pane_center">
<div class="pane__content">
blah blahblah
</div>
</div>
</div>
Raw
settings.json
{"view":"split-vertical","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