What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » Page Curl Shadows

Page Curl Shadows

.page-curl {
position: relative;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }

.page-curl:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
right: 10px;
bottom: 10px;
-webkit-transform: skew(15deg) rotate(5deg);
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(15deg) rotate(5deg);
-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }

.page-curl:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
left: 10px;
bottom: 10px;
-webkit-transform: skew(-15deg) rotate(-5deg);
-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-15deg) rotate(-5deg);
-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }

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.

Reference URL

Subscribe to The Thread

  1. Nico1485

    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!

    Reply ↓
  2. Jrutlanddesign

    Really nice snippet, looks really nice

    Reply ↓
  3. Bountalis

    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??

    Reply ↓
  4. Bountalis

    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!

    Reply ↓
  5. Rasmus

    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.

    Reply ↓
  6. Rasmus

    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.

    Reply ↓
  7. kete

    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.

    Reply ↓
  8. 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

    Reply ↓
  9. Muhammad Faryad

    Very cool and nice effect really.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~