Skip to content

Instantly share code, notes, and snippets.

@plindberg

plindberg/dabblet.css

Created February 20, 2012 15:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save plindberg/1869675 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save plindberg/1869675 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
*/
#o {
position: absolute;
top: 20px; left: 20px;
display: inline-block;
overflow: hidden;
width: 50%;
}
#w {
display: table;
margin: 5px 0 5px 5px;
position: relative;
z-index: 3;
box-sizing: border-box;
}
#a {
display: table-cell;
}
#a > img {
width: 100%;
margin-bottom: -3px;
margin-right: 10px;
}
#b {
display: table-cell;
vertical-align: middle;
}
#x {
background-color: #faa;
position: absolute;
top: 0; left: 0;
right: 68px; bottom: 0;
z-index: 2;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 5% 50%;
border-bottom-right-radius: 5% 50%;
}
#y {
background-color: #aaf;
position: absolute;
top: 0; right: 0;
bottom: 0;
width: 100px;
z-index: 1;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id=o>
<div id=w>
<div id=a><img src=http://0.0.0.0:5000/assets/logo53x53.png></div>
<div id=b>Text text text.</div>
</div>
<div id=x></div>
<div id=y></div>
</div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment