Content Box with Lifted Shadows

Rishabh

• 15210
• 43
• 0

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.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room