Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Content Box with Lifted Shadows

    CSSDeck G+