Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
From the author of

6. Drop Shadows

Drop shadows are regularly used to make elements pop off a page. With Web designs, however, drop shadows are generally available only if they are included as part of a larger graphic.

You can place drop shadows behind any rectangular element on the screen, and even control the offset of the drop shadow in the CSS, as long as you know the background color for the Web page.

As with the rounded corners example, first create the general graphic template for your drop shadow—basically a square with Gaussian blurred edges.

Slice the image into three pieces: the top edge, the left edge, and then everything in-between.

You can then place the shadow behind any object on the page and even control the shadow’s offset to create a subtle or dramatic effect.

EXAMPLE:

http://www.webbedenvironments.com/dhtml_css_advanced/code/05_Layout/DropShadow/index.html

  • + Share This
  • 🔖 Save To Your Account