Skip to content

Instantly share code, notes, and snippets.

@jsnkuhn

jsnkuhn/dabblet.css

Created July 12, 2012 22:39
Show Gist options
  • Save jsnkuhn/3101532 to your computer and use it in GitHub Desktop.
Save jsnkuhn/3101532 to your computer and use it in GitHub Desktop.
Download ZIP
More Realistic CSS tape
Raw
dabblet.css
/* More Realistic CSS tape */
body{background-color:#eee;background:url('http://subtlepatterns.com/patterns/paper.png');min-height:100%;
font-family:cursive;}
div{position:relative;padding-top:1.5em;width:300px;height:200px;margin:50px auto;
background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.1) 90%),linear-gradient(to right,rgba(255,255,255,.5),rgba(255,255,255,.1) 45%,rgba(255,255,255,.5) 98% ),linear-gradient(#fd0,#fd0);
border:1px solid rgba(2552,255,255,.1);box-shadow:0 0 2px rgba(0,0,0,.2);
border-bottom-left-radius:180px 2px;border-bottom-right-radius:180px 1px;
}
div:before {
/* position, size etc... */
display:block;content:"";position:absolute;width:150px;height:30px;top:-13px;left:25%;
/* slight shadow because tape has a little depth */
box-shadow:0px 0 3px rgba(0,0,0,0.1);
/* does anyone ever line tape up perfectly? No. */
transform:rotateZ(2deg);
/* dashed borders to give the frayed edges */
border-left:1px dashed rgba(254, 254, 254, .6);border-right:1px dashed rgba(254, 254, 254, .6);
/* no piece of tape has ever had perfectly square corners */
border-top-left-radius:100px 2px;
/* as a result of the tugging to cut, tape usually streaches a bit making sections more or less transparent */
background:linear-gradient(to right,rgba(254, 254, 254, .6),rgba(254, 254, 254, .7),rgba(254, 254, 254, .6));
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div>
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Butter</li>
<li>CANDY!!!</li>
</ul>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
@kingkool68
Copy link

I wanted to see what this would look like so I made a CodePen https://codepen.io/kingkool68/pen/poORVzg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment