Content Box with Lifted Shadows
Description
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 `.lifted_content_box 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 `.lifted_content_box`. 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.
Comment
Description
0 Comments
(close)