Plough Deep logo

Onion Skinned Drop Shadows

They're Not Just For Images

Put a shadow under a block of content.

With a little imagination, and the addition of another element (<div>) that wraps around your content object, you can put a drop shadow under virtually anything. In this case, the content object consists of an <h2>, an <h3>, and a couple of <p>'s.

The new <div> content wrapper introduced in this example uses the .box class which sets the background-color, padding, and border properties for this object. The background-color property is critical, since it masks the underlying shadow.

Back to article