• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

10. Filters > Creating a Drop Shadow

Creating a Drop Shadow

In Chapter 4, in Section 4.3.5, we created a drop shadow by offsetting a gray ellipse underneath a colored ellipse. It worked, but it wasn’t elegant. Let’s investigate a way to create a better-looking drop shadow with a filter.

Establishing the Filter’s Bounds

The <filter> element has attributes that describe the clipping region for a filter. You specify an x, y, width, and height in terms of the percentage of the filtered object’s bounding box. (That is the default.) Any portion of the resulting output that’s outside the bounds will not be displayed. If you are intending to apply a filter to many objects, you may want to omit these attributes altogether and take the default values of x equal to -10%, y equal to -10%, width equal to 120%, and height equal to 120%. This gives extra space for filters — such as the drop shadow that we’re constructing — that produce output larger than their input.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint