Multiple CSS Filters in Ie

Multiple CSS filters in IE

There cannot be more than 1 filter property, as IE will only take the last one into effect.

NOTE: Since this seems to be getting a few down votes I wanted to clarify that this doesn't mean you can't apply multiple filters, just that you can only use 1 filter property. If you try applying multiple filters and separate them out into multiple properties, only the last one will take effect.

According to the following article from MSDN, they are separated not by a comma but a space: http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

Also note that some IE filters (alpha included) require the element to have layout in order to be applied correctly: http://www.satzansatz.de/cssd/onhavinglayout.html

how to use both shadow and opacity for the same div in ie8

I finally found the way. Was rather simple.

just added the css for adding shadow to IE8 to the enclosing div "Iframewrapper"

  #IframeWrapper {

        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    }

So instead of adding both the css for opacity and shadow in same div, it works if they are in differnt div's.

How to apply a CSS 3 blur filter to a Text/image for Internet Explorer or IE 11

You could make blur filter using SVG gaussian blur! It is work with are modern browsers.

Control in intensity of blur from stdDeviation="4"

Demo

See also

<div class="container" style="height: 613px;">    <svg id="mySVG" width="100%" height="100%" viewBox="0 0 1131 591">        <filter id="blurMe">            <feGaussianBlur in="SourceGraphic" stdDeviation="4" />        </filter>        <image filter="url(#blurMe)" xlink:href="http://static1.squarespace.com/static/56d70b042b8dde104d998bda/t/56d9b7e827d4bdab535a3af8/1457109282817/kiddos.jpg?format=1500w" x="0" y="0" height="100%" width="100%"/>    </svg></div>

CSS filter composed of multiple SVG filters makes image darker

I was running into the same issue and chanced upon this somewhat related answer for SVG Filter: Different colouring depending on browser. It seems that the color-interpolation-filters="sRGB" property could be added to each filter to fix the behavior.

I've tried on Chrome with the below and saw that without the property, darkening occurs, with the property, the image is normal.

Not sure why the behavior is like that, but this may unblock you.

<img src="https://i.imgur.com/a0bs8oJ.jpeg"/>

<svg>
  <defs>
    <filter id="f1" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
      <feFlood in="SourceGraphic" x="0.70" y="0.1" width="0.15" height="0.25" />
      <feComposite operator="in" in="SourceGraphic"/>
      <feColorMatrix type="saturate" values="0"/>
      <feComposite operator="over" in2="SourceGraphic"/>
    </filter>
    <filter id="f2" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB">
      <feFlood in="SourceGraphic" x="0.25" y="0.4" width="0.25" height="0.35" />
      <feComposite operator="in" in="SourceGraphic"/>
      <feColorMatrix type="saturate" values="0"/>
      <feComposite operator="over" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>

img {
  width: 1000px;
  height: 1000px;
  filter: url(#f1) url(#f2)
}

Create filter that passes multiple selectors via css

See http://jsfiddle.net/desandro/pJ6W8/31/

1. There was a missing comma within getSortData.

2. Your JS was missing var filters = {}. Without this statement you were tapping into the global filters variable, which the browser provides as the #filters element.

3. Changed filters[ group ] = $this.attr('data-filter-value'); to filters[ group ] = $this.attr('data-filter');` to match your HTML

4. Added ,sortAscending : true where it was needed for the sort click events.

In IE, how do I remove a filter?

The answer is to set the enabled property of the filter like so:

filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);

CSS: -ms-filter not working on IE in angular 4

1. The modern definition of css filter doesn't work in IE8. IE8 does have the older, proprietary MS filters, but those are not the same.
2. You can't have 2 properties to a selector a row with the same name. That's not how CSS works. In this case, the second -ms-filter will override the first one, so that only brightness(70%) is used.
   
   The solution, according to MSDN, is to use commas to separate multiple values.

Aside from that, apparently neither the old MS versions nor the newer standard versions are supported by IE10 and IE11, so you're out of luck in any version.

You can use

.style {filter:gray}

in IE8 to set the gray scale to 100%, but I haven't found any equivalent for brightness, sorry.

Multiple Background Images in Internet Explorer

You can definitely do this in older versions of IE. You will need to download the css3Pie library. Once you've done that, in your css where you want to set your background properties you would use it like so:

#my-element 
{
    -pie-background:url(image.png) 0 0 no-repeat, url(image2.png) bottom repeat-x;
     behavior: url(path/to/PIE.htc);
}

Here's a link to the documentation.

---

Related Topics