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.