-webkit-filter: drop-shadow for other browsers

by

Ok I have figured this out – the equivalent for opera and firefox is:

filter: url(drop-shadow.svg#drop-shadow);

where drop-shadow.svg looks like this:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
    <feOffset dx="1" dy="4" result="offsetblur"/>
    <feFlood flood-color="rgba(0,0,0,0.3)"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

IE being so crap doesn’t support the svg values feOffset, feFlood or feMerge so doesn’t currently have an equivelant

I’ll leave this open in-case anyone figures out how to do this effect for IE

UPDATE

Thanks to psdie for finding this post

IE Version:

-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color="#444")";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=1, Color="#444")";

More Related Contents:

  1. CSS for button with right triangle at lower right [closed]
  2. I do not want to inherit the child opacity from the parent in CSS
  3. Custom CSS Scrollbar for Firefox
  4. Border-radius in percentage (%) and pixels (px) or em
  5. CSS 100% height with padding/margin
  6. Reset CSS display property to default value
  7. CSS selector for “foo that contains bar”? [duplicate]
  8. CSS reset – What exactly does it do?
  9. Font Awesome 5 shows empty square when using the JS+SVG version
  10. How can I make an svg scale with its parent container?
  11. What is difference between justify-self, justify-items and justify-content in CSS grid?
  12. Why does `overflow:hidden` prevent `position:sticky` from working?
  13. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  14. Style disabled button with CSS
  15. Z-Index Relative or Absolute?
  16. What’s the difference between `all: unset` and `all: revert’
  17. Slanted Corner on CSS box
  18. rotate3d shorthand
  19. How to specify an element after which to wrap in css flexbox? [duplicate]
  20. How to link a CSS file from HTML file?
  21. Build list of selectors with LESS
  22. Changing an input’s HTML5 placeholder color with CSS does not work on Chrome
  23. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  24. how to rotate text left 90 degree and cell size is adjusted according to text in html
  25. CSS fill remaining width
  26. Set div height equal to screen size
  27. Styling the new twitter widget (embedded timeline)
  28. What CSS3 features still need vendor prefixes?
  29. CSS Animation property stays after animating
  30. Using @font-face with Rails 3.1 app?

Leave a Comment