UI Tips
LANGUAGES: ALL
ASP.NET VERSIONS: ALL
Spice Up Your UI
DirectX Transitions and Filters Can Make Your Web Pages More Compelling
By Andrew Flick and Devin Rader
As we enter the dawn of a new era, two new up-and-coming UI superheroes are here to make their debut. Who are we, you may ask? We are Flick and Rader: Partners in UI; but we are more commonly known to the outside world as Andrew Flick and Devin Rader, Technology Evangelists for Infragistics.
Whether we have superhuman powers is questionable but you won t be seeing us scale any tall buildings in a city near you. And as the superheroes for a new generation, we are leaving the fight between good and evil to our predecessors, so that we may be able to focus on the daunting task of saving the world one tip and trick at a time!
In the coming months, we ll introduce you to a range of tips and tricks, from transitions and filters and going 508 Compliant to how a server-side developer should interact with a UI developer. All of our tips will enable you to create awesome user-interfaces in look, style, and performance.
Introduction
Internet Explorer contains many little-known and hidden features that, given the right circumstances, you can use to your advantage when developing Web sites. Because many of these features are specific to Internet Explorer, and are not available on any other browser, you should probably only consider using them when you are developing in an environment like a corporate intranet or some other controlled environment where you can guarantee that everyone who uses the site will be using Internet Explorer. Given that caveat, there is really no reason why you cannot take advantage of these powerful features.
In this installment of UI Tips we are looking at transitions and filters. Transitions and filters are UI capabilities that have been present in IE since version 4, but were greatly enhanced with version 5.5 and now include a variety of visual effects, which we ll review and demonstrate here.
Static Filters
Filters change the way the content of an object is displayed. IE comes with a variety of useful filters you can use to change how your content is displayed, ranging from blur, opacity, and glow effects to making elements spin and appear to hover. Adding a filter to your Web page is quite easy. Filters are essentially an extension to CSS styles in IE, so if you are familiar with creating styles for your page elements, then adding filters should be easy for you. For example, if you wanted to control the opacity level of some text, you can use the Alpha filter:
The quick brown fox jumps over the lazy dog
Notice that when we specify the Alpha filter we also pass the opacity parameter into the method. Each filter will have its own parameters that you must supply. Adding this filter reduces the opacity for our text to 25%. You can add filters to almost every HTML element, so adding this same filter to an Image, Button, or even a table would have the same effect.
You can also add multiple filters to an element. We can extend our sample above by adding a DropShadow filter:
The quick brown fox jumps over the lazy dog
Figure 1: A demonstration of several
types of static filters.
Transitions
Transitions are filters that reveal new content with a particular effect. They function similarly to the slide transitions that you can add to a PowerPoint slide deck. Like filters, IE comes with a variety of transitions that can be allied to a variety of elements on your HTML page.
Transitions are used just like filters, and, just like filters, can be used on almost every HTML element. Transitions can be used to create things like a Photo Gallery viewer:
style="filter:progid:DXImageTransform.Microsoft.Fade(duration=3)"
onclick="nextimage();" />
Here we are using the Fade transition to create a simple photo viewer. Once again, we pass the duration parameter to the Fade transition to tell it how long the fade should take. Other transitions have different parameters.
You can also combine transitions with filters in the same way you can combine multiple filters.
Gradient
The Gradient filter can be used to create gradients on element backgrounds. Using the Gradient filter can be much easier than trying to apply a gradient image to the background of your element: