Skip to content

Instantly share code, notes, and snippets.

@MartinKnopf

MartinKnopf/gist:5273784

Created March 29, 2013 21:28
Show Gist options
  • Save MartinKnopf/5273784 to your computer and use it in GitHub Desktop.
Save MartinKnopf/5273784 to your computer and use it in GitHub Desktop.
Download ZIP
angular shadow on 120x135 box
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Elementschatten mit CSS3 Box Shadow</title>
<style>
body {
width: 500px;
margin: 100px auto;
}
.boxshadow {
display: inline-block;
position: relative;
float: left;
width: 120px;
height: 135px;
border: 1px solid #eee;
background-color: white;
}
.right-shadow {
-webkit-box-shadow: 0px 0px 12px 5px rgba(0, 0, 0, .5) !important;
box-shadow: 0px 0px 9px 4px rgba(0, 0, 0, .5);
-moz-transform: skew(-4deg);
-webkit-transform: skew(-4deg);
-o-transform: skew(-4deg);
transform: skew(-4deg);
position : relative;
float: left;
bottom: -15px;
left: 115px;
height: 110px;
z-index: -1;
}
.left-shadow {
-webkit-box-shadow: 0px 0px 12px 5px rgba(0, 0, 0, .5) !important;
box-shadow: 0px 0px 9px 4px rgba(0, 0, 0, .5);
-moz-transform: skew(4deg);
-webkit-transform: skew(4deg);
-o-transform: skew(4deg);
transform: skew(4deg);
position : relative;
float: left;
bottom: -15px;
right: -7px;
height: 110px;
z-index: -1;
}
</style>
<!--[IF IE 8]>
<style>
.right-shadow {
position : relative;
float: left;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=50, Direction=90, Color='#666666'),
progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.06, M21=0, M22=1, SizingMethod='auto expand');
background-color: white;
top: 5px;
left: 72px;
width: 8px;
height: 120px;
z-index: -1;
}
.left-shadow {
position : relative;
float: left;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=50, Direction=270, Color='#666666'),
progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.06, M21=0, M22=1, SizingMethod='auto expand');
background-color: white;
top: 5px;
left: 9px;
width: 8px;
height: 120px;
}
</style>
<![ENDIF]-->
</head>
<body>
<div class="left-shadow"></div>
<div class="right-shadow"></div>
<div class="boxshadow"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment