CSS3 Skewed Shadows


 / Published in: CSS
 

  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
Posted By: trusktr on November 3, 2010

Whaaaaaaat, you can do that with CSS now!?! that's awesome.

Posted By: bumstaerk on November 5, 2010

Cool :)

You need to login to post a comment.