Skip to content

Instantly share code, notes, and snippets.

@doublejosh

doublejosh/css_page_curl_shadow

Created May 21, 2011 18:42
Show Gist options
  • Save doublejosh/984778 to your computer and use it in GitHub Desktop.
Save doublejosh/984778 to your computer and use it in GitHub Desktop.
Download ZIP
Cross Browser CSS Page Curl Shadow
Raw
css_page_curl_shadow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cross Browser CSS Page Curl Shadow</title>
<style type="text/css">
body{font-family: "American Typewriter","Bookman Old Style","Palatino Linotype","Palatino",Georgia,typewriter,monos;}
#page-wrap{width:960px;margin:5% auto;}
.shadow-wrap{}
.shadow-wrap .content{border:1px solid #888;text-align:center;}
.shadow-wrap .content p{margin:100px 0 0 0;}
.example-wrap{width:30%;margin-left:5%;float:left;}
.example-wrap.col-1{margin-left:0;}
.example-wrap.col-1 .content{background:#F97A6B;}
.example-wrap.col-2 .content{background:#FDD649;}
.example-wrap.col-3 .content{background:#84BBDF;}
</style>
<!-- Curl Shadow CSS -->
<style type="text/css">
.shadow-wrap{position:relative;height:250px;width:100%;zoom:1;}
.shadow-wrap .shadow-inner-1,
.shadow-wrap .shadow-inner-2{
position:absolute;bottom:5px;width:50%;height:50px;z-index:1;
-moz-box-shadow: rgba(0,0,0,0.50) 0 6px 15px 0;
-webkit-box-shadow: rgba(0,0,0,0.50) 0 6px 15px;
box-shadow: rgba(0,0,0,0.50) 0 6px 15px 0;
}
.shadow-wrap .shadow-inner-1{
left:18px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}
.shadow-wrap .shadow-inner-2{
right:18px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
}
.shadow-wrap .content{
width:100%;height:100%;z-index:2;position:relative;background:#fff;
}
</style>
<!--[if IE]>
<style type="text/css">
.shadow-wrap .shadow-inner-1,
.shadow-wrap .shadow-inner-2{
background:#000;bottom:30px;
}
.shadow-wrap{padding:0 0 10px 0;}
.shadow-wrap .content{width:96%;margin:0 2%;}
.shadow-wrap .shadow-inner-1{
left:0px;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand')";
filter:
progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand')
progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}
.shadow-wrap .shadow-inner-2{
right:0px;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=-0.08715574, M21=0.08715574, M22=0.99619470,sizingMethod='auto expand')";
filter:
progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=-0.08715574, M21=0.08715574, M22=0.99619470,sizingMethod='auto expand')
progid:DXImageTransform.Microsoft.Blur(PixelRadius='15', MakeShadow='true', ShadowOpacity='0.40');
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
.shadow-wrap .shadow-inner-1,.shadow-wrap .shadow-inner-2{bottom:-10px;}
</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css">
.shadow-wrap .shadow-inner-2{right:30px;}
</style>
<![endif]-->
<!-- END Curl Shadow CSS -->
</head>
<body>
<div id="page-wrap">
<div class="example-wrap col-1">
<!-- Curl Shadow HTML -->
<div class="shadow-wrap">
<div class="shadow-inner-1"></div>
<div class="shadow-inner-2"></div>
<div class="content">
<p>La La La</p>
</div>
</div>
<!-- END Curl Shadow HTML -->
</div>
<div class="example-wrap col-2">
<div class="shadow-wrap">
<div class="shadow-inner-1"></div>
<div class="shadow-inner-2"></div>
<div class="content">
<p>La La La</p>
</div>
</div>
</div>
<div class="example-wrap col-3">
<div class="shadow-wrap">
<div class="shadow-inner-1"></div>
<div class="shadow-inner-2"></div>
<div class="content">
<p>La La La</p>
</div>
</div>
</div>
</div>
</body>
</html>
@doublejosh
Copy link
Author

JSFiddle version without IE fixes...
http://jsfiddle.net/t4M5R/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment