Skip to content

Instantly share code, notes, and snippets.

@mkj-is

mkj-is/paper-stacks.html

Created January 21, 2013 23:34
Show Gist options
  • Save mkj-is/4590577 to your computer and use it in GitHub Desktop.
Save mkj-is/4590577 to your computer and use it in GitHub Desktop.
Download ZIP
Different CSS3 box-shadow paper-stacks (3rd is from here: http://cssdeck.com/labs/stacked-papers-using-box-shadow)
Raw
paper-stacks.html
<!DOCTYPE html>
<html>
<head>
<title>Shadow test</title>
<style type="text/css">
#paper-stack1{
position: absolute;
top:100px;
left:100px;
width: 100px;
height: 100px;
background-color: #eee;
-webkit-box-shadow: 0px 4px 0px -2px #666, 0px 8px 0px -4px #444, 0px 12px 0px -6px #222, 0px 16px 0px -8px #333;
}
#paper-stack2{
position: absolute;
top:100px;
left:300px;
width: 100px;
height: 100px;
border: 1px solid #333;
background-color: #f8f8f8;
-webkit-box-shadow: 0px 7px 0px -5px #ddd, 0px 7px 0px -4px #333, 0px 14px 0px -9px #ccc, 0px 14px 0px -8px #333;
}
#paper-stack3{
position: absolute;
top:100px;
left:500px;
width: 100px;
height: 100px;
background-color:#fff;
color:#aaa;
border:1px solid #c2c0b8;
-webkit-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
}
</style>
</head>
<body>
<div id="paper-stack1"></div>
<div id="paper-stack2"></div>
<div id="paper-stack3"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment