Skip to content

Instantly share code, notes, and snippets.

@tyron

tyron/dabblet.css

Created September 11, 2012 00:58
Show Gist options
  • Save tyron/3695188 to your computer and use it in GitHub Desktop.
Save tyron/3695188 to your computer and use it in GitHub Desktop.
Download ZIP
Lifted corners
Raw
dabblet.css
.frame {
border: 1px solid #DDDDDD;
padding: 10px;
background: -moz-linear-gradient(left, #dadad8 0%, #e8e8e7 0%, #e8e8e6 2%, #ececeb 2%, #f4f4f3 30%, #fbfbfb 45%, #fbfbfb 55%, #f4f4f3 70%, #f0f0ef 88%, #ededeb 97%, #ececea 98%, #e8e8e6 98%, #e8e8e8 100%); /*FF3.6+ */
}
.drop-shadow {
position:relative;
width:40%;
padding:1em;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
/* Lifted corners */
.lifted {
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:10%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
transform:rotate(3deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="frame drop-shadow lifted" style="width: 300px; height: 50px;">
teste
</div>
<br>
<img class="frame" src="http://cdn.css-tricks.com/wp-content/uploads/2008/03/hdr-44_1.jpg">
<div class="frame"><img style="border:1px solid red" src="http://cdn.css-tricks.com/wp-content/uploads/2008/03/hdr-44_1.jpg"></div>
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