Last active
January 3, 2016 20:39
-
-
Save centurianii/8516792 to your computer and use it in GitHub Desktop.
Sticker shadow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Sticker shadow | |
*/ | |
body:before | |
{ | |
content: ""; | |
position: fixed; | |
top: -10px; | |
left: 0; | |
width: 100%; | |
height: 10px; | |
z-index: 100; | |
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); | |
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); | |
box-shadow: 0px 0px 10px rgba(0,0,0,.8); | |
} | |
#box | |
{ | |
position: relative; | |
width: 80%; | |
background: #ddd; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
padding: 1em 1.5em; | |
color: rgba(0,0,0, .8); | |
text-shadow: 0 1px 0 #fff; | |
line-height: 1.5; | |
margin: 60px auto; | |
} | |
#box:before, #box:after | |
{ | |
z-index: -1; | |
position: absolute; | |
content: ""; | |
bottom: 15px; | |
left: 10px; | |
width: 50%; | |
top: 80%; | |
max-width:300px; | |
background: rgba(0, 0, 0, 0.7); | |
-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); | |
-o-transform: rotate(-3deg); | |
-ms-transform: rotate(-3deg); | |
transform: rotate(-3deg); | |
} | |
#box:after | |
{ | |
-webkit-transform: rotate(3deg); | |
-moz-transform: rotate(3deg); | |
-o-transform: rotate(3deg); | |
-ms-transform: rotate(3deg); | |
transform: rotate(3deg); | |
right: 10px; | |
left: auto; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="box"> | |
<h1>Slick effects with CSS3 box-shadow</h1> | |
<p>Note the top shadow applied to the <code>body</code> and also the drop shadow added to this box.</p> | |
<a href="http://www.red-team-design.com/wp-content/uploads/2011/04/css3-box-shadow.html">www.red-team-design.com</a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment