Skip to content

Instantly share code, notes, and snippets.

@arnoldc

arnoldc/skewed-shadow-demo.html

Last active January 28, 2018 22:47
Show Gist options
  • Save arnoldc/5844462 to your computer and use it in GitHub Desktop.
Save arnoldc/5844462 to your computer and use it in GitHub Desktop.
Download ZIP
css: Skewed Shadow using CSS3
Raw
skewed-shadow-demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="box">
<img src="http://4.bp.blogspot.com/_5WQYppSBbNI/TQ1I0wGtlhI/AAAAAAAAADo/hueUot8XpjA/s1600/cute-puppy.jpg" alt="" />
</div>
</body>
</html>
Raw
skewed-shadow.css
.box {
position: relative;
-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
box-shadow: 1px 2px 4px rgba(0,0,0,.5);
padding: 10px;
background: white;
width:200px;
}
.box img {
max-width: 100%;
border: 1px inset #8a4419;
}
.box:after {
content: '';
position: absolute;
width: 50%;
height: 40px;
bottom: 20px;
right: 90px;
z-index: -1;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
transform: skew(-40deg);
-webkit-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
-moz-box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment