Skip to content

Instantly share code, notes, and snippets.

@parkr

parkr/dabblet.css

Created May 13, 2012 20:42
Show Gist options
  • Save parkr/2690086 to your computer and use it in GitHub Desktop.
Save parkr/2690086 to your computer and use it in GitHub Desktop.
Download ZIP
Scroll text behind container
Raw
dabblet.css
/**
* Scroll text behind container
*/
body { background-color: #cccccc; font-size: 2em; }
#content { background-color: #dddddd; height: 600px; width: 100%; overflow: hidden; }
#text_container {
background-color: transparent;
border-top: 40px transparent solid;
border-bottom: 40px transparent solid;
border-left: 40px transparent solid;
border-right: 40px transparent solid;
position: relative;
overflow-y: scroll;
overflow-x: hidden;
height: 520px; // =(height of #container) - (width of border-top) - (width of border-bottom)
width: 720px; // = (width of base.png) - (width of border-left) - (width of border-right)
}
#main_text {
background-color: #eee;
min-height: 1000px;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="content">
<div id="text_container">
<div id="main_text">lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
</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