I recently released "my" first Drupal module after a number of years making...
Cross Browser CSS Page Curl Shadow
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...
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
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