Posted By

Nettuts on 11/03/10


Tagged

css CSS3 shadow shadows


Versions (?)

Who likes this?

32 people have marked this snippet as a favorite

johnloy
dloop
djgogi
mb2o
thisisrogerflanagan
claudiowebdesign
clementcollier
frkssk
chendrix
arnolddc71
abir
ischenkodv
kwameboame
arucordoba
pmigueld
Foxyfox
takel
PixelJuice
Onfire60
f1r3fl3x
OUTDesigns
baczoni
michellebracken
karstenrowe
sethetter
eeels
qubestream
dubogii
leehsueh
deiby
clinicdigital
dennywalker


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.