Skip to content

Instantly share code, notes, and snippets.

@goulvench

goulvench/dabblet.css

Created December 7, 2012 13:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save goulvench/4233198 to your computer and use it in GitHub Desktop.
Save goulvench/4233198 to your computer and use it in GitHub Desktop.
Download ZIP
Linear-gradient for transparent corners
Raw
dabblet.css
/**
* Linear-gradient for transparent corners
* Based on http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
*/
div {
width: 100px;
padding: 2em 0;
margin: 2em auto;
background: black;
}
p {
color: white;
background: black;
margin: 0 -10px;
padding: .2em 0;
position: relative;
text-align: center;
}
p::after,
p::before {
position: absolute;
left: -9px;
right: -9px;
content: "";
height: 20px;
}
p::before {
top: -20px;
background: linear-gradient(135deg, transparent 20px, black 20px), linear-gradient(225deg, transparent 20px, black 20px);
background-position: left top, right top;
}
p::after {
bottom: -20px;
background: linear-gradient(45deg, transparent 20px, black 20px), linear-gradient(315deg, transparent 20px, black 20px);
background-position: left bottom, right bottom;
}
p::after,
p::before {
background-size: 20px 20px;
background-repeat: no-repeat;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div>
<p>Some text</p>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment