I'm using this css code to make the blur effect a div :
.blur
{
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
}
<div class="blur">
<!-- HTML code -->
</div>
The problem is that the IExplorer browsers do not support filter effects .
How can I make this effect in IE? Are there any alternatives?
As you gave few details I will respond with a simple option. It may be that this option does not work for all cases, but it is an alternative since we do not have much more details.
Option 1: Using box-shadow . note that this is a property already well accepted by browsers, even the oldest! It works from I9 + link
Option 2: Using SVG . See that the SVG is well accepted even by IE from version 9 as you can check here link
Image made in IE11
Followthecodefortheimageabove.
Theoptionwithbox-shadowwasdoneisnothingmorethananelementwithmultiplebox-shadowsoverlapping.InolderIEsifitdoesnotacceptmorethan%w/oyoucanoverridetheentireelementoneovertheotherwithbox-shadow
SVGjustuseposition:absoluteFilter.Youcandoasinthefirstexamplewiththefilteronlyintherectorinthe<feGaussianBlurin="SourceGraphic" stdDeviation="5" /> and the rect giving the impression that everything is with text
body {
margin: 10px 0 0 40px;
display: flex;
}
.box {
width: 115px;
height: 115px;
background-color: red;
top: 10px;
position: relative;
}
.box.bs {
box-shadow:
0px 0px 8px 0px red,
0px 0px 8px 0px red,
0px 0px 8px 0px red,
0px 0px 8px 0px red
}
div {
margin-right: 30px;
}<div>
<p>DIV com box-shadow</p>
<div class="box bs" >123</div>
</div>
<div>
<p>DIV com filtro</p>
<div class="box" style="filter:blur(2px); width:120px; height: 120px">123</div>
</div>
<div>
<p>SVG com defs filter</p>
<svg height="140" width="140">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<rect x="10" y="10" width="120" height="120" fill="red" filter="url(#f1)" />
<text x="10" y="25" fill="black">123</text>
</svg>
</div>
<div>
<p>SVG com defs filter em tudo</p>
<svg height="140" width="140">
<defs>
<filter id="f1" >
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
</defs>
<rect x="10" y="10" width="120" height="120" fill="red" filter="url(#f1)" />
<text filter="url(#f1)" x="10" y="25" fill="black">123</text>
</svg>
</div>Hello,
Have you tried using filter: progid?
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius=25);
If you want to know more: link