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.
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!
IE is not a browser . LOL
Really nice snippet, looks really nice
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??
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!
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.
For shadows dropping behind a parent’s background color you can use either of these methods – http://jsfiddle.net/D4qCm/1
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.
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.
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
Very cool and nice effect really.
Thanks…
It’s working on my blog: http://www.medspatherapy.com
how do you increase the curl on just one corner any one please
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.
Here it is working again with skewX() — skew() support was removed from Firefox.
http://jsfiddle.net/dropsoul/ts325/37/light/
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.
It really adds something interesting to the design of a website. Thank you
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/
setting the ’s ‘z-index’ to ‘-2’ does the trick.
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.
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.