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
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
: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.