Skip to content

Instantly share code, notes, and snippets.

@sthembi

sthembi/dabblet.css

Created February 13, 2013 19:54
Show Gist options
  • Save sthembi/4947611 to your computer and use it in GitHub Desktop.
Save sthembi/4947611 to your computer and use it in GitHub Desktop.
Download ZIP
Tucked corners with one element
Raw
dabblet.css
/**
* Tucked corners with one element
From LeaVerou - love this!!
*/
html {
background: url('http://www.red-team-design.com/wp-content/uploads/2012/10/wood.png')
}
body {
width: 500px;
height: 200px;
margin: 50px auto;
border: 11px solid transparent;
background: white;
background: linear-gradient(45deg, transparent 30px, rgba(0,0,0,.15) 0, transparent 37px),
linear-gradient(135deg, transparent 30px, rgba(0,0,0,.15) 0, transparent 37px),
linear-gradient(225deg, transparent 30px, rgba(0,0,0,.15) 0, transparent 37px),
linear-gradient(-45deg, transparent 30px, rgba(0,0,0,.15) 0, transparent 37px),
linear-gradient(45deg, transparent 15px, white 0),
linear-gradient(135deg, transparent 15px, white 0),
linear-gradient(225deg, transparent 15px, white 0),
linear-gradient(-45deg, transparent 15px, white 0);
background-clip: border-box, border-box, border-box, border-box, padding-box, padding-box, padding-box, padding-box;
background-origin: border-box, border-box, border-box, border-box, padding-box, padding-box, padding-box, padding-box;
background-repeat: no-repeat;
background-position: bottom left, top left, top right, bottom right, bottom left, top left, top right, bottom right;
background-size: 51% 51%;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
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