yDSF (ydnar-drop-shadow-fu) Demonstration

This page is a demonstration of the yDSF technique for applying robust drop shadows to XHTML pages using CSS. The images/blocks on this page are contained inside a pair of <div> elements with class="ydsf" and class="inner" respectively.

In order for the drop-shadow effect to work correctly, the shadowed blocks must be floated or absolutely positioned. The text on this page is deliberately set against the images with no margins to demonstrate that this technique does not change the dimensions of the elements with drop shadows.

Browser compatibility

In Mozilla variants, the boxes will have translucent PNG drop shadows. On Internet Explorer 5+ for Windows, the drop shadows will fall back to help-style pixel checkerboard pattern.

On Internet Explorer 5 on the Mac, the drop shadow should be soft with hard corners (no :before or :after pseudoelement support).

Find Out More

From here, you can view the CSS for this page, return to the yDSF article, skim the Professional Network Articles index, or return to the Six Apart homepage.