Look, ma... no images!!!

It's really nice to see what is possible when combining the UIZE JavaScript Framework with the neat new features of CSS3 - like text shadow - that are being implemented in the newer versions of Firefox, Chrome, Safari, and Opera (and some more that I'm probably missing). No, it's not clear yet whether IE9 will support text shadow, but hopefully they will join the party - there's fun to be had for all.

In this new example that I put together, a new method of the Uize.Fx module is being used to create CSS style "fades" - or gradients - across a series of nodes. In this case, the nodes are links in a navigation menu. The UIZE JavaScript Framework lets you perform compound fades and supply different curve functions to different components of a fade. So, for example, you could provide a different curve function for the red color channel of the background color as the curve functions you provide for the green and blue color channels. This allows for some pretty radical and nuanced transitions. No, the same linear curve applied to everything is definitely not interesting, anymore. Compound non-linear is the new black.

Take a look at the example and experiment with the different presets. If you've got the time, hang up your coat and linger for a while. Once you get the hang of it, you'll be creating your own tasty gradients

http://www.uize.com/examples/fade-css-style-across-nodes.html

.

Animating the CSS Text Shadow Property

Just finished up with adding support for text shadow animation to the UIZE JavaScript Framework. I think you’ll find something interesting to look at here…

http://www.uize.com/examples/hover-fader-text-shadow-animation.html

I love the fact that Firefox 3.5x fully supports the text-shadow property. It's nice to see it in Google Chrome, Safari, and Opera, as well. Would be nice to get the IE folks on board. Performance seems to be best in Safari, so far. Chrome 3.0 seems to have some rendering issues with text shadow: not quite as smooth as it could be, and there appears to be some interaction between the shadow and the text above it. Nevertheless, the results are pretty consistent between all the browsers that support text shadow, which is encouraging.

When animating text shadow, it's once again pretty compelling to apply different curve functions to different components of what you're animating. So, a text shadow can move, or its blur radius can change over time, or its color can change... but why should these all have to happen at the same rate? I just spent a bit of time playing with settings and came up with the short list of presets you'll see on the example page, but I can just tell from my cursory experimentation that there's a whole world of Hollywood movie credit like text effects awaiting the creative mind with these new features of CSS3. My favorite preset so far is the "Sci-fi Materialize", which makes me think of a Star Trek transporter.