Content Box with Lifted Shadows
Content Box with lifted Shadows made with pure CSS.
Unfortunately it doesnt works in < IE9. Although you could achieve a decent result in IE7 and IE8 by replacing the article element with a div
and adding a border
to the .liftedcontentbox
div. You could also use html5shiv to create the article element (and other HTML5 elements like header
, nav
, aside
, footer
, section
, hgroup
, etc.) in < IE9. Well, IE7 will still not render the title nicely because of its lack of support of display: inline-block
on non-inline elements (You might want to read this though).
In order to achieve the lifted shadow we made use of a combination of CSS3 shadows and transforms on the :before
and :after
pseudo-classes of .liftedcontentbox
. I added some shadow to the pseudo-classes and then rotated them. z-index: -1
was required to hide the part that showed above the content box. You may remove the z-index
property to see how the pseudo-classes actually looks like. Skewing the pseudo-classes revamped the shadow effect a lot.