Advanced Search

CSS3 Skewed Shadows

/ Published in: CSS
Save to your folder(s)
<a href="http://nettuts.s3.amazonaws.com/837_shadow/shadow/index.html">View a demo</a>

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Tuts</title>
  6.  
  7. 	<style>
  8. 	body {
  9. 		width: 500px;
  10. 		margin: 50px auto;
  11. 	}
  12.  
  13. 	.box {
  14. 		position: relative;
  15. 		-webkit-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
  16. 		-moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
  17. 		box-shadow: 1px 2px 4px rgba(0,0,0,.5);
  18.  
  19. 		/* Kokakify */
  20. 		padding: 10px;
  21. 		background: white;
  22. 	}
  23.  
  24. 	.box img {
  25. 		max-width: 100%;
  26. 		border: 1px inset #8a4419;
  27. 	}
  28.  
  29. 	.box:after {
  30. 		content: '';
  31. 		-webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
  32. 		-moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
  33. 		box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
  34. 		position: absolute;
  35. 		width: 50%;
  36. 		height: 40px;
  37. 		bottom: 20px;
  38. 		right: 90px;
  39. 		z-index: -1;
  40. 		-webkit-transform: skew(-40deg);
  41. 		-moz-transform: skew(-40deg);
  42. 		transform: skew(-40deg);		
  43.  
  44. 	}
  45. 	</style>
  46.  
  47. </head>
  48.  
  49. <body>
  50.  
  51. <div class="box">
  52. 	<img src="tuts.jpg" alt="Tuts" />
  53. </div>
  54.  
  55. </body>
  56. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.