When I was in college, back in 1997, I produced a short web comic called “2+2”. It was a commentary on public schooling and the treatment of contradictory thinking. In the comic, the student’s thoughts are represented by a glowing orb, which is literally ripped from his head.

To render the orb, I used the most high tech web technology available to me at the time, animated gif. The effect worked, but limitations of the gif format did not allow me to have a soft glowing effect that I wanted. Flash was still very new at the time and was not a widely adopted plugin. I could have later redone it in Flash. But I wanted to keep it in a pure web format.

With CSS3 I finally have the ability to produce the glowing effect that I wanted. I’m in the process of redoing the entire cartoon with the CSS3 effect but for now I offer a sneak preview, panel 8:

The full source is available within the jsfiddle widget above. The effect has two parts:

Part 1: The Glow

The glowing effect starts with a CSS3 gradient. I alternate between white and transparent radial gradients to create the wavy effect.

The gradient is layered on top of a solid png of the scene.

Finally, a PNG24 with alpha transparency is used to mask the gradient to produce glowing rays.

Part 2: Animation

The solution isn’t perfect. As of version 9, Internet Explorer still doesn’t have any support for gradients. The differences in implementation between webkit and mozilla make for more complex code. And a flaw in Safari’s (including iPhone/iPad) implementation of webkit makes the animation impossible. Once the CSS3 gradient properties become standardized, the technique will be much easier to implement. For now, it works very well in Firefox and Chrome, as well as any android based device.