apply drop-shadow like CSS3 effect in firefox

Question

I am working on a project which uses CSS3's drop-shadow. Drop Shadow is being applied to an Image having alpha pixels as well. It works fine in Chrome. Problem arises with firefox. I want an alternative solution to it. Currently I am using SVGs to render drop-shadow like effects but it is too heavy and moreover it is causing some issues. I'd like to get some ideas so as to implement same functionality in firefox.

Pls help. Thanks.

Answer 1

Firefox implements the filter effects working draft <feDropShadow> element. This is optimised so it will work somewhat faster than tying all the individual filters together.

The example below shows the an SVG 1.1 drop shadow and the new <feDropShadow> equivalent.

<svg viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="feDropShadowEquiv1">
        <feGaussianBlur stdDeviation="3"/>
        <feOffset dx="3" dy="3" result="offsetblur"/>
        <feFlood flood-color="#720"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
    <filter id="feDropShadow1">
        <feDropShadow stdDeviation="3" flood-color="#720"/>
    </filter>
  </defs>
  <g font-family="Verdana" font-size="30">
    <text x="100" y="90" filter="url(#feDropShadow1)">feDropShadow</text>
    <text x="100" y="140" filter="url(#feDropShadowEquiv1)" >feDropShadow</text>
  </g>
</svg>