Cross Browser CSS Page Curl Shadow

Josh Lind's picture
in

The web world is super partial to design trends. For industry types it can feel like a must to keep up with the Jones'. Sometimes these visuals can even be useful. Case in point are page curled shadows to make content stand out. This effect also helps content appear more real world and easier to engage with. Luckily this design trick is now available on-call, in the browser with CSS.

Here are two great examples of this built out, but only for non-retarded browsers...
http://nicolasgallagher.com/css-drop-shadows-without-images/demo
http://matthamm.com/box-shadow-curl.html

These are real nice, but much of the world uses IE. It's sad but true. It's not your most forward-thinking innovative traffic, but plenty of business folks --who have no choice-- and plenty of people who don't know there are any other options :(

I accomplished it by absolute positioning a two items behind the main content, tilting them and apply the shadow to them.

I do want to give props to the matrix transform calculator for the IE rotation. Transforms are kinda rough because you have to think in 3D and for us non-game web types it just causes headaches. http://www.boogdesign.com/examples/transforms/matrix-calculator.html

Of course the IE method involves adding some extra HTML, as most IE hacks do. So if you'd prefer to add those element with javascript be my guest, and keep your semantic conscious clear.

Here is the DEMO.

It should look something like this:

I imagine you'll want to go try this out for yourself to make sure I'm not crazy. You'll probably notice some slight differences in the appearance and size of the shadow. It was close enough for me to roll with it, but please feel free to improve upon it.

This has been tested in:

  • IE: 7 & 8 (not < 6, duh)
  • FF: 3.6 & 4.0 (not < 3.0)
  • Safari 5
  • Chrome 11

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
You must be a member of this group in order to post a comment.