Just realised Firefox 3 doesn’t support box shadows, so I wonder if it is worth trying to work around it?

@Divya: I added a paragraph about Firefox 3.0 and why there is actually no need for any work around with this specific effect. It ignores position:absolute on the pseudo-element and so the display value is left as the default inline…meaning it won’t apply width and height values to the pseudo-elements anyway.

Cameron Moll recently posted his version, based on Matt Hamm’s code.

http://dribbble.com/shots/88003-CSS-page-curls#comment-229528

@Spencer: Thanks. If you want to reproduce that exact effect you could make the code a bit more efficient and robust. I’ve added the non-webkit transforms and box-shadows too:

ul.box {
   position: relative;
   z-index: 1;
   overflow: hidden;
   list-style: none;
   margin: 0;
   padding: 0;
}

ul.box li {
   position: relative;
   float: left;
   width: 204px;
   height: 113px;
   padding: 0;
   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;
   right: 10px;
   bottom: 10px;
   width: 70%;
   height: 55%;
   max-width: 300px;
   -webkit-transform: skew(-15deg) rotate(-6deg);
   -moz-transform: skew(-15deg) rotate(-6deg);
   -o-transform: skew(-15deg) rotate(-6deg);
   transform: skew(-15deg) rotate(-6deg);
   -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);
} 

ul.box li:after {
   right: auto;
   left: 10px;
   -webkit-transform: skew(15deg) rotate(6deg);
   -moz-transform: skew(15deg) rotate(6deg);
   -o-transform: skew(15deg) rotate(6deg);
   transform: skew(15deg) rotate(6deg);
   -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);
}

Thank you, Nicolas. Excellent walk-through. Took the liberty of tipping a few of my friends of your site.

Merry Xmas 2 U

That’s an awesome tip. thanks man!

This is excellent – thanks! I’ve started using these on a couple sites already. I’ve noticed though that the inset shadow makes webkit-based browsers slow to a crawl on the mac, making the page almost unusable. Things like resizing, filling in forms etc. become painfully slow until I disable the shadow. I haven’t figured a way around it yet – anyone have the same problem?

IE9 RC also supports transform (-ms-transform: )

Thanks a lot, new piece of css knoqledge!

Great tip, thanks for sharing

These are very cool proof of concepts, but I put together a demo that illustrates webkit having major issues with repeated occurrences of shadows with large blur values (I originally thought the problem was attributed to the double box-shadows as you’ll see by the title :D ).

http://niccai.com/demos/webkit/webkit-double-box-shadow-bug.html

@NICCAI: This is a known WebKit-on-Mac issue that has recently been fixed in trunk – https://bugs.webkit.org/show_bug.cgi?id=22102

Valuable post Nicolas, thanks. I’m not clear whether non-supporting browsers degrade gracefully and interested to hear your response to @David about the Mac (something I can’t test myself).

Mark

cool need more patience to work these kind of effect
very nice tut.

Thanks

@theWebalyst: See the comment just above yours. And yes, degrades gracefully in older browsers. Open the demo up in IE8 to see for yourself.

Neat!
Will explore that more very soon.
Thank you!

That’s cool. All you did was use the pseudos After and Before to pull this effect off haha. Nice trick there.

These look great Nicolas. I implemented something like this on my CSS3 Sticky Note, but I don’t think they look as good as these. Probably just need a little more tweaking.

Nice work Nicolas.

You could also leverage the same technique to build speech bubbles, although you’d be quite limited with their presentation from having to have the pseudo element on top of the parent.

Example: http://jsfiddle.net/yTXz4/

Hey Darron. I did some pseudo-element speech bubbles a while back – http://nicolasgallagher.com/pure-css-speech-bubbles/. Most of those use CSS 2.1 but you can also use CSS gradients (to create the triangle of colour) and CSS transforms (to modify the shape and orientation). And there is always the option of using the pseudo-element to display an image of a more decorative “tooltip” too.

Have you run across any issues when applying a CSS drop shadow to a div containing a video? I recently applied the lifted corners style and for some reason the video suddenly has frame rate issues but only in Chrome. It works in every other browser as far as I can tell. Perhaps I implemented incorrectly? You can check out the site over at http://realityeaster.com

Alan, I believe this is a WebKit issue with box-shadows (possibly confined to Mac OSX) that has been fixed and will eventually make it’s way into the a stable release of Chrome. There were no problems when I viewed your site in Chrome (Windows).

Thanks, Nicolas. Appreciate the follow-up. Seems odd that it’s only with Chrome (in Mac OSX). Good to know though.

Holy crap I love this. I can’t wait to test some of this out. Too bad it’ll still be a little while before most average users upgrade to IE9. Thanks for the post.

I really love these effects but I’m here to ask if there’s a known solution to Chrome not rendering the inset shadow over the box? In all of your examples Firefox looks perfect, and even IE9 seems to be showing everything alright, but Webkit is a toss-up. On this machine running Windows 7 64-bit even Safari 5 properly extends the shadow inside the box, but Chrome renders the box solid. It’s most obvious when you Ctrl-+ a few times, but even from 100% it is noticeable.

I also wanted to pass along a weird bug: in IE9 if you try to implement your effects in a table-layout div you can’t use border-collapse: collapse or only the inset shadows render. Weird?

Different but annoying: in every browser but Firefox using the same div table-cell layout (to achieve equal-height columns) with no border-spacing (as that puts outer border spacing, not just between the internal cells) the divs are perfectly aligned, but this causes a simple edge box-shadow to be covered up. For my example, I have three divs set to display: table-cell, the first column has a box-shadow set to the right side to help offset its background with the adjacent white background cell. Firefox properly continues to render the effect, but Webkit obscures it unless I make the second div’s background transparent. Any ideas what the final spec will entail regarding these inconsistencies? Personally the Firefox rendering appears to be correct, but what do I know lol?

Nice information, i will definitely try it on my new projects

wow I like that…

Awesome. I figured out a couple of methods similar to this for doing the basic “corner peel up shadow” a couple months back but boy does it help that you’ve gone and figured out all of these others!

This is absolutely incredible. Thank you so much for this! You have save me a ton of time.

This is 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

@Josh The article makes clear that this technique works in IE9+. It’s a non-critical decorative effect that can be included as a CSS-only enhancement in capable browsers.

Agree it’s normally mostly a “non-critical decorative effect,” however we often use it to pop one specific item for call-to-action type elements for downloading trial software.

Just had to make it work in IE before we could roll with it.

Thanks for your work! It was a basis for what I did.

This is amazing!!! One tip for the Pure CSS3 box-shadow page curl effect demo…the overflow:hidden on the ul cuts off the left side shadows of the first two boxes. Remove the overflow altogether or use a different clearing method, or add left padding to avoid cutting the shadow.

This is wonderful! Thank you for sharing.

Thanks for sharing these design patterns. I will say that if the element you are placing the page “curl” effect on is not showing the shadow and you have double and tripple checked the markup and CSS…I encourage you to look at the parent element and make sure is is positioned relatively with a z-index.