0

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.

JayKandari
  • 1,228
  • 4
  • 16
  • 33
  • What is the problem that you are facing in Firefox with respect to drop shadow? Can you include a sample code in the question? – Harry Jul 09 '14 at 07:23
  • For eg: try loading this( http://jsfiddle.net/JayKandari/q83wE ) fiddle in Chrome and firefox separately. It works in Chrome but not in Firefox. Any alternatives. Thanks – JayKandari Jul 09 '14 at 08:05
  • Refer to [this SO thread](http://stackoverflow.com/questions/16802308/drop-shadow-not-showing-up-in-latest-firefox). It seems like Firefox doesnt have full support for CSS filters. You can also see [here](http://caniuse.com/css-filters) that the support is very minimal in all Firefox versions. Hence you may have to use alternate methods like mentioned in Robert's answer. – Harry Jul 09 '14 at 08:24
  • 1
    @Jai You already know the alternative, use an SVG filter. – Robert Longson Jul 09 '14 at 08:43

1 Answers1

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>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242