Panel 8

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

When I began experimenting with this effect my intention was to use CSS3 transform effects. However I could not find a solution that produced a seamless endless loop. I ended up falling back on JavaScript. jQuery was used to write out the gradient based on an incrementing variable. That function is called in a timer to control the speed.

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.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *