Tuesday, December 6, 2011

Fixing IE PNG opacity

So you've got a sweet jQuery-based animation working in Firefox and Chrome and all that, and you check in IE, and, in horror, you find that the opacity animations on PNG background images are showing this ugly black halo. What to do?

Easiest fix:

//say this is your initial style
.thing {
background:url(images/translucent.png) no-repeat;
filter:alpha(opacity=50);
opacity:0.5;
}

//add this to the stylesheet
.thing {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=/path/to/images/translucent.png) alpha(opacity=50);
background:none\9;
}

(I wrapped the one line to fit in the blog, but the filter declaration should be all in one line)

Just make sure you use an absolute image path on the filter, not a relative one. Tweak the opacity to your liking.

When animating, jQuery is smart enough to not clobber the AlphaImageLoader filter when it changes the opacity one.

Tuesday, October 11, 2011

On Dart

So people are going bananas over this new language that Google says will supposedly replace Javascript.

What I'm wondering is: what can I do with this new language that I cannot do with Javascript? Can I compete with native mobile apps? Can I compete with the Flash 11 API? Flash 10? 9? 8? Or does it only provide me with yet-another-slightly-different-syntax-to-do-what-I-can-already-do?

Tuesday, October 4, 2011

On Node.js

Some trolling on Node.js. I remember having a convo with Dave S. about exactly this a few weeks ago.

I don't know about slow Fibonacci functions, but I could totally see a misguided soul writing yet-another-MVC-framework that used require (a blocking function in Node.js) in the wrong place.

Monday, July 18, 2011

Some notes on CSS drop shadows

So I wanted to do some CSS shadow for a project I was working on and it turns out that IE has filters to emulate the CSS3 box-shadow property:

.shadow {
 -moz-box-shadow: 3px 3px 4px #888;
 -webkit-box-shadow: 3px 3px 4px #888;
 box-shadow: 3px 3px 4px #888;
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888')";
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#888888');
}

This works fine and dandy for the simple cases, but there are a couple of caveats that should be written down since I haven't seen these mentioned anywhere:

  1. The IE shadow gets the box model wrong: it adds the size of the shadow to the width/height of the element to which it's applied. Beware when floating and applying to elastic layouts.
  2. The IE shadow does not necessarily appear around the element. If you have a div w/ a background-image that is smaller than the div itself, the shadow will be applied to the edge of the background image, not around the outline of the element

Monday, February 28, 2011