Page Curl Shadows

ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }

ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }

ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }

Be careful that these boxes aren't sitting within another element that has a background, otherwise the negative z-index values (required for this to work) will force the shadows underneath that and not show up.

Comments

  1. User Avatar
    Nico1485
    Permalink to comment#

    THANKS A LOT !!! This is glorious!

    I will make the page curl shadows with this technic in my sites. I’m thinking how to dregade it to IE, but that’s other story.

    Thank!

  2. User Avatar
    Jrutlanddesign
    Permalink to comment#

    Really nice snippet, looks really nice

  3. User Avatar
    Bountalis
    Permalink to comment#

    Hi nice snippet,

    but it makes problems if i had a div with a background-color and inside the snippet code and i dont understand why??

  4. User Avatar
    Bountalis
    Permalink to comment#

    Oh, i see. Please ignore my comment :P
    It’s a nice snippet and i love these sort of shadow. Normally i do it with images but now…Thanks!

  5. User Avatar
    Rasmus
    Permalink to comment#

    I’m going mad, trying to make it work when inside a div with a background property.

    How come the negative values are mandatory? Why on earth doesn’t css allow me to give :before and :after a lower (positive) value than the front element? (ie. 1, 2 and 3 instead of -2, -1 and auto)

    The only solution I’ve found is giving the parent div an even lower (negative) z-index value, but that renders everything in that div useless.

  6. User Avatar
    Rasmus
    Permalink to comment#

    Eureka! I found the solution!! This can be done, even when nested in a div with a background color or image!

    Just add style=”-webkit-transform:rotate(0deg);transform:rotate(0deg);-moz-transform:rotate(0deg);” to the element with the .page-curl class.

  7. User Avatar
    kete
    Permalink to comment#

    I want to imitate kde’s quadros http://www.flickr.com/photos/martincasc/4373577269/ with text on top. So far, I have a gradient for the odd list elements and an opposite gradient for the evens. Maybe I can pull it off.

  8. User Avatar
    Josh

    That’s real nice, but it doesn’t work in IE. I worked up a way to accomplish it cross-browser here…

    http://betterwebshop.com/blog/2011/05/cross-browser-css-page-curl-shadow

  9. User Avatar
    Muhammad Faryad
    Permalink to comment#

    Very cool and nice effect really.

  10. User Avatar
    Sammy
    Permalink to comment#

    Thanks…
    It’s working on my blog: http://www.medspatherapy.com

  11. User Avatar
    lue
    Permalink to comment#

    how do you increase the curl on just one corner any one please

  12. User Avatar
    Christina Beymer
    Permalink to comment#

    This doesn’t work in the latest update of Firefox. It worked two days ago, before I upgraded. I don’t see this effect anywhere on the web with this browser.

  13. User Avatar
    Christina Beymer
    Permalink to comment#

    Here it is working again with skewX() — skew() support was removed from Firefox.

    http://jsfiddle.net/dropsoul/ts325/37/light/

  14. User Avatar
    TheAmountof
    Permalink to comment#

    Thank you Christina, I had used the page curl shadow effect on a couple of sites and noticed over the weekend that they were all gone in FireFox. Now to go back and update my style sheets.

  15. User Avatar
    Pat
    Permalink to comment#

    It really adds something interesting to the design of a website. Thank you

  16. User Avatar
    josh lee
    Permalink to comment#

    thx for the great idea. playing around with it I encountered problems with images in the background though. any ideas?

    http://jsfiddle.net/BpgXC/7/

    • User Avatar
      josh lee
      Permalink to comment#

      setting the ’s ‘z-index’ to ‘-2’ does the trick.

  17. User Avatar
    Julian K
    Permalink to comment#

    I noticed that if you put a border around the element, it appears behind the shadows. I fixed this by removing the z-index value of the parent element.

  18. User Avatar
    Thanos
    Permalink to comment#

    Excellent because the effect isn’t hidden if other elements, with background, exist beneath the element with the effect.
    I was searching an idea to solve this problem and didn’t expect that if the parent element has relative position and big z-index could solve it.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag