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

10. Filters > Creating a Glowing Shadow

Creating a Glowing Shadow

The drop shadow works well on the flower, but looks totally unimpressive when applied to text, as we see in Figure 10-4.

Drop shadow applied to text
Figure 10-4. Drop shadow applied to text

Instead, we’d like a glowing turquoise area to surround the text, and we can do this with the <feColorMatrix> primitive to change black to a different color.

The feColorMatrix Element

The <feColorMatrix> element allows you to change color values in a very generalized way. The sequence of primitives used to create a glowing turquoise shadow is shown in Example 10-3.

Example 10-3. Glow filter
 <filter id="glow">
    <feColorMatrix type="matrix"     [1]
        values=
            "0 0 0 0   0
             0 0 0 0.9 0 
             0 0 0 0.9 0 
             0 0 0 1   0"/>
    <feGaussianBlur stdDeviation="2.5"     [2]
        result="coloredBlur"/>     [3]
    <feMerge>     [4]
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
    </feMerge>
</filter>

PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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