Implement drop-shadow filtering specifically for Internet Explorer

Question

Implement drop-shadow filtering specifically for Internet Explorer

I am currently implementing a drop-shadow filter on a curved png, and while it works perfectly in most browsers, IE seems to be the exception.

You can see the issue with the boxes on this page: (Three boxes located just below 'Yoga Sequence Builder 3 in 1:')

This is the code I am using:

.curved::after {
    content: "";
    -webkit-filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.12));
    filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.12));
    width: 100%;
    display: inline-block;
    height: 40px;
    position: absolute;
    bottom: -39px;
    left: 0;
}

Unfortunately, I need assistance in achieving the same effect in IE.

I have attempted to use:

filter: progid:DXImageTransform.Microsoft.Shadow

as well as:

filter: progid:DXImageTransform.Microsoft.DropShadow

Neither of these attempts have been successful :/

css internet-explorer dropshadow

Answer 1

Answer №1

Why not consider using the box-shadow property? Let's use a circle as an example:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3f0;
  box-shadow: 0px 5px 5px #888888;
}

<div class="circle"><div>

Also, in your given scenario, utilizing a bottom image may not be the most optimal solution. What if there is a change in width? This approach might lack responsiveness. Instead, I would recommend using the following CSS:

body {
  background-color: #ccc;
}

#box {
  position: relative;
  height: 250px;
  width: 150px;
  background-color: white;
  margin: 50px;
  z-index: 2;
}

#box::after {
  position: absolute;
  z-index: 3;
  content: "";
  width: 150px;
  height: 30px;
  background-color: white;
  bottom: -30px;
  border-radius: 00px 0px 50% 50%;
  border-top: 5px solid white;
  box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.2);
}

<div id="box"></div>

Answer 2

Why not consider using the box-shadow property? Let's use a circle as an example:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #3f0;
  box-shadow: 0px 5px 5px #888888;
}

<div class="circle"><div>

Also, in your given scenario, utilizing a bottom image may not be the most optimal solution. What if there is a change in width? This approach might lack responsiveness. Instead, I would recommend using the following CSS:

body {
  background-color: #ccc;
}

#box {
  position: relative;
  height: 250px;
  width: 150px;
  background-color: white;
  margin: 50px;
  z-index: 2;
}

#box::after {
  position: absolute;
  z-index: 3;
  content: "";
  width: 150px;
  height: 30px;
  background-color: white;
  bottom: -30px;
  border-radius: 00px 0px 50% 50%;
  border-top: 5px solid white;
  box-shadow: 0px 3px 2px 1px rgba(0, 0, 0, 0.2);
}

<div id="box"></div>

Answer 3

Answer №2

If you're looking to apply SVG filters in Internet Explorer, it is possible. I personally tested it with IE10.

div
{
width:32px;
line-height:32px;
text-align:center;
border-radius:50%;
background:#4af;
filter: url(#drop-shadow); /* applying the specified SVG filter */
}

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2.5"/>
        <feOffset dx="0" dy="0" result="offsetblur"/>
        <feFlood flood-color="#0f0"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

<div>A</div>

Answer 4

If you're looking to apply SVG filters in Internet Explorer, it is possible. I personally tested it with IE10.

div
{
width:32px;
line-height:32px;
text-align:center;
border-radius:50%;
background:#4af;
filter: url(#drop-shadow); /* applying the specified SVG filter */
}

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="2.5"/>
        <feOffset dx="0" dy="0" result="offsetblur"/>
        <feFlood flood-color="#0f0"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

<div>A</div>

Implement drop-shadow filtering specifically for Internet Explorer

Answer №1

Answer №2

Similar questions

Ways to retain a variable's value beyond the scope of a loop in PHP

Automatic playback of the next video in a video slider

Desktop froze up as modal failed to respond

Navbar currently active does not switch when moving to a different page

Tips for creating responsive scrollable columns in an HTML table with Bootstrap

Using Javascript and JQuery to create an alert that pops up upon loading the page is not effective

Convert a solo row into individual columns within a grid format

Animate in Angular using transform without requiring absolute positioning after the animation is completed

Is it possible to attach the entered URL to an image following the text that has been inputted?

Is it possible to apply a margin to <details><summary> elements?

Adding Content Dynamically Before an HTML Element with CSS During Runtime

Why isn't jQuery toggle working to toggle, and how can I fix my background

Overlap of a fixed right column over a fixed sidebar in Bootstrap 4, causing it to overlap the

Choose a sibling element using CSS styling

Adding dynamic text to a <span> tag within a <p> element is causing a disruption in my layout

Looking to deactivate a particular checkbox in a chosen mode while expanding the tree branches

Encountering a parsing issue within my React program

Maintaining uniform cell width in tables even when some data is missing

What is the best way to initiate a new animation from the current position?