Co-Sponsored by: Latest Features  • Columns & Rows: Part II  • Model: The “M” in ASP.NET MVC  • Patterns & Practices  • XAML Marks the Spot  • Columns & Rows: Part I Article Rating Rate this article on a scale from 0 to 5 5 Best 4   3   2   1   0 Worst Email Tell a friend about this article!

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:

<div style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);">

 The quick brown fox jumps over the lazy dog

</div>

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:

<div style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=25);

 progid:DXImageTransform.Microsoft.DropShadow()">

   The quick brown fox jumps over the lazy dog

</div>

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:

<script language="javascript">

 var images = new Array();

 images[0] = "image1.jpg";

 images[1] = "image2.jpg";

 images[2] = "image3.jpg";

 var currentimage=0;

</script>

<script language=javascript>

function nextimage() {

 currentimage++;

 if (currentimage > images.length-1) {

     currentimage=0;

 }

 var oSlide = document.getElementById("imgSlide");

 oSlide.filters[0].Apply();

 oSlide.src = images[currentimage];

 oSlide.filters[0].Play();

}

</script>

<img id="imgSlide" src="image1.jpg"

 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:

<TABLE style="filter:progid:DXImageTransform.Microsoft.Gradient(

 GradientType=0, StartColorStr='#0000FF', EndColorStr='#000000')">

This code will create a table with a gradient background. The Gradient lets you specify the colors you want it to use to create the gradient. You can also change the orientation of the gradient from a horizontal gradient to a vertical gradient. Horizontal is the default.

AlphaImageLoader

Finally, we have the AlphaImageLoader filter. This filter allows you to display an image and gives you options to clip and resize the image. You can also use the AlphaImageLoader to load and correctly display transparent PNG images, which IE cannot natively do:

<div ID="oDiv" STYLE="position:relative; height:250px; width:250px;

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

 src='/workshop/graphics/earglobe.gif', sizingMethod='scale');" >

</div>

In this case, the image we are loading is smaller than the container, but by using the sizingMethod property, we are able to use the AlphaImageLoader to resize the image to fit the container size.

Conclusion

Using IE’s filters and transitions is a great way to add a little spice to your Web pages — and it’s easy. For more information, see Filters and Transitions on the Microsoft MSDN Web site. There you’ll find an excellent programmer’s reference, as well as samples that let you try out more of the filter and transition effects.

With that, we remind you to e-mail your questions to us at mailto:UITips@aspnetPRO.com.

Andrew Flick is a .NET technical evangelist for Infragistics Inc., a Microsoft Visual Studio Industry Partner. He is responsible for authoring reference applications and .NET technology articles, as well as delivering Infragistics’ technology demonstrations worldwide. Andrew is a Microsoft .NET MVP and is the chair of the INETA Academic Student Committee. Contact Andrew at mailto:andrew@infragistics.com.

Devin Rader is an Infragistics Technology Evangelist and is responsible for authoring Infragistics’ reference applications and .NET technology articles, as well as the world-wide delivery of Infragistics’ technology demonstrations. Devin is an active member and leader for INETA, has served as the sole technical editor for numerous works, and is a contributing author for the soon to be published ASP.NET 2.0 Professional. Contact Devin at mailto:devinr@infragistics.com.