I am using this property for box-shadow:
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
It won't work on IE. I looked up on the web and found that I can use something like this:
filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=10);
But I am not sure how to use my box-shadow values for this IE snippet. How can I convert it?
Unfortunately there isn't an auto-generator for box-shadow filters on old IE.
Best recommendation I can provide is to use CSS3 Pie (link found here). It provides CSS3 features like border-radius
, linear-gradient
, as well as box-shadow
, all the way back to IE6.
Slightly tangential, but there IS a really cool auto-filter
generator for rgba / hsla colors done by Kimili (link found here). Doesn't help with box-shadow
, but it is great for using those crazy filters to create background-color
opacity on IE6-8.
It'll work on IE 9, 10, and 11. You only need the filter for IE 8 and below. You should also add the -webkit version of it for older Android browsers and iOS safari, and older blackberries.
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
You could try these for older versions of IE:
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#000000');
Alternatively, you might think about using a library like http://css3pie.com/ if you have to support older versions of IE, which will take care of the box-shadows (and other things) for you.
The best is to go have a look on msdn.microsoft.com site at http://msdn.microsoft.com/en-us/library/ms673539(v=vs.85).aspx .
Here you have the different filters avalaible.
Note yo can multiplicate your filters like in box or text shadow with : ,
Check out for shadow and dropshadow filter , you might be able to make something quiet similar.
If shadows apply on text as well, give a background to the element, anything like one pixel image , thousands of pixel away if you want no backgrounds.
Hope it helps .
Note , time spent for so little visitors is maybe not worth it.
Cheers