Skip to content

Instantly share code, notes, and snippets.

@JohnMorales

JohnMorales/dabblet.css

Created November 30, 2014 12:14
Show Gist options
  • Save JohnMorales/6dd9c144ca07a0260632 to your computer and use it in GitHub Desktop.
Save JohnMorales/6dd9c144ca07a0260632 to your computer and use it in GitHub Desktop.
Download ZIP
Corner Effect
Raw
dabblet.css
body {
background: #e6e6e6;
}
.corners {
background: #f6f6f6;
height: 700px;
margin: 50px auto;
max-width: 600px;
position: relative;
width: 80%;
-webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
-moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
}
/* Corner Effect */
.corners:after,
.corners:before {
background: #e6e6e6;
content: '';
height: 50px;
position: absolute;
top: -25px;
width: 100px;
-webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
-moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
}
.corners:after {
left: -50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.corners:before {
right: -50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Raw
dabblet.html
<div class="corners">
Content
</div><!-- content to be placed inside <body>…</body> -->
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