Responsive drop shadows – demo page

This is a demo document related to the article Responsive drop shadows. Please see the article for context and information.

This box has a shadow created with an image applied to an absolutely positioned pseudo-element and scaled to fill the available background positioning area.

This box has a shadow created with an image applied to an absolutely positioned pseudo-element and scaled to fill the available background positioning area’s width while maintaining the image’s intrinsic aspect ratio.

This box has a shadow created with an image applied to its background positioning area. The content is prevented from covering the shadow by a percentage-based bottom padding that also maintains the background image’s intrinsic aspect ratio.

This box has a shadow created with an absolutely positioned pseudo-element that uses a combination of box-shadow and border-radius.