demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS3 Colors, Gradients and Opacity In Internet Explorer With MS Filters

ie

Estimated reading time: 1 minute, 45 seconds

If a website uses a great deal of CSS3, it makes sense to create compatibility with IE via a CSS3 JavaScript shim. But if your site only uses a few CSS3 values (as the current incarnation of this blog does, in the feature bar) loading 20K of JavaScript to make IE work is overkill, and a significant waste of resources.

Microsoft has long supported its own way of creating many visual effects that are now featured in CSS3, ever since IE 5.5. The problem is that the filters are rather long, complex, proprietary (supported only in IE) and somewhat difficult to understand; I find it easiest to use various tools to convert CSS3 into MS-specific filters, and then call those generated values with conditional comments.

This article covers MS-filters for gradients, rgba/hula and opacity; in articles to come I’ll talk about ways to create text and box shadow along with transformations for IE.

Gradients

ColorzillaCSS3 gradients are not supported in any current version of IE, including IE9 (although they will be supported in IE10). However, simple (one color start, one color end, no stops) gradients can be made by using DXImageTransform.Microsoft.Gradient. I use ColorZilla’s Ultimate CSS Gradient generator to create the code from its PhotoShop-like slider interface.

rgba / hsla

RGB PHPIE9 supports rgba, but earlier versions of the browser do not. However, you can use a variant of DXImageTransform.Microsoft.Gradient to create the same result (colours with partial transparency) for IE. I use a small web-based application created by Michael Bester for the conversion from rgba to Microsoft proprietary code; another popular solutions is Lea Verou’s PHP function to do the same thing with just a single extra CSS declaration.

Opacity

Opacity effects are relatively easy to replicate in IE. You don’t even need to use a generator; just cut and paste the code below and change the value as needed (the Microsoft version of the filter measures opacity between 0 and 100, rather than 0 and 1):

filter: alpha(opacity=50);

IE9 follows the standard CSS3 value.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.