To be able to create animated visual transitions between Web pages. To be able to modify filters dynamically, using DHTML. Prentice Hall, Inc. All rights. DHTML Filter Session There are two types of filters: visual filter and transitions. A visual filter affects the appearance of the content. greater variety of special effects. To be able to create animated visual transitions between Web pages. To be able to modify filters dynamically, using DHTML.
|Published (Last):||24 February 2011|
|PDF File Size:||20.11 Mb|
|ePub File Size:||10.19 Mb|
|Price:||Free* [*Free Regsitration Required]|
Filters and Transitions
By combining filters and transitions with basic scripting, you have a powerful tool for creating visually engaging and interactive documents. This article includes the following sections, which explain how to use filters and transitions to add visual effects to filers Web page.
Visual filters tranitions extensions to CSS properties that change the display of an object’s contents. In some cases, filters create simple behaviors that could be implemented as script. In other cases, a filter goes far beyond script and modifies the rendered appearance djtml the content of an object. Using filters simplifies the task of incorporating sophisticated effects in Web documents.
Static visual filters affect the display of content, while transitions affect the way content changes in an object are displayed. To see the Filters and Transitions Interactive Demo, which demonstrates most of the filters and transitions, click the following button. Click to view sample.
CSS Filters – Text and Image Effects
Filters are applied to Fhtml controls through the filter property. The filter property is a string of filter descriptions that uses a function-like notation, but you do not need to know script to implement this property.
The following example shows a filter declaration composed of two filters. This example HTML attaches two filters to the object. The first causes the image to blur over a specified number of pixels.
Introduction to Filters and Transitions (Internet Explorer)
The second filter flips the image vertically. You can apply multiple filters, as shown in the example. The BasicImage and MotionBlur filters are both applied to the object. Each filter can have a set of optional parameters that define the nature of the effect, such as color or duration.
In the example, using BasicImage’s Mirror and Rotation properties gives the appearance of flipping tarnsitions image vertically. Filters often create effects that can be generated with script. This raises the question, “Why use filters if script can do the job?
Filters and Transitions
The most important flters because they don’t require script. For better or worse, many HTML authors do not use scripting. Filters are a convenient package for the same functionality that scripting provides. Another benefit of filters is that they are easier to author and can be applied to entire classes of elements, because they use the declarative and inherited syntax of CSS. Filters and transitions display properly only on systems that have the color palette set to display colors or more.
Almost any object can have filters applied to it. However, the object that the filter is applied to must have layout before the filter effect will display. Put simply, having layout means that an object has a defined height and width. Some objects, like un controls, have layout by default. All other filterable objects gain layout by setting the height or width property, setting the position property to absolutesetting the writingMode property to tb-rlor setting the contentEditable property to true.
You can also apply dhttml filter to the BODY element. The BODY element automatically has layout because it specifically contains the client area of the window. However, doing so causes some filters to change when the window is resized by the user. One way to avoid this is to apply the filter to a DIV that contains all of the elements of the document.
The following transiitons shows how to work around applying a filter to the BODY element. Visual filters modify the appearance of transitoons content of an object. The Alpha anx is a good example of a visual filter. It blends its target into the background; you control the amount of blend, or opacity. Opacity is expressed as a percentage. For example, the following HTML causes the image to be 20 percent opaque. A filters collection is available on every object to provide access to the individual filters of each object.
The collection can dbtml accessed like any other object model collection. Filters are considered subobjects of the object to which they are attached. Like other objects, they expose properties and methods for changing their internal state.
Like other object model collections, the filters collection supports several kinds of access.
The following example addresses individual filters by their numeric and named indexes in the filters collection. Numeric access is useful when more than one filter of the same type is applied or when the type of filter isn’t known in advance—for example, if it is set through script or data binding.
This is important for filters and transitions that have common properties and methods, such as the Color and play properties. In the following example, the opacity of the content of an object is dynamically changed by changing the opacity property of the Alpha filter.
This same syntax can be used to call the methods needed to make the CheckerBoard transition work in the following example. Alternately, you can access the CheckerBoard filter by index. The Style object also has a filter property. For instance, using the div object defined above, the following code produces an alert message. Writing to this property is useful to change an object’s filters dynamically. Writing to this property overwrites the existing value, and the browser renders the new string immediately.
The following example adds an Iris filter to the filter string on the fly. Additional changes to that collection’s filter string modify the new string. For complex filter manipulation, you must keep track of the current states of the filter collections. Some filters use transparency transitionns create a visual effect.
Text with no background color or image automatically has transparency; the space around the characters shows through to the object or page behind it. GIF images must be in gif89a format with a transparent color to display these filters properly.
It is important to consider performance when iflters Web pages with filters. Processing time is required to calculate the display of filter effects, and some effects require more time than others to apply.
It is useless to try to apply and change a filter on an object before the browser can even render it. If you apply and change a filter before the browser can render the object, the changes are not updated. For example, transigions the Alpha filter’s opacity property in a short looping dhtl does not result in consecutive updates to the object.
To ensure updates are performed for each cycle of the script, use an onfilterchange event handler to delay changes in opacity until the browser has rendered the last update. You can apply one or more filter effects to a group of objects by wrapping them in a parent element which has one or more filters applied to tilters.
There are unlimited uses for filters in both static and dynamic Web pages. The following scenarios explore some common or interesting applications of filter styles and combinations of script and filters. Static visual effects are the most common use of filters. These uses transjtions simply applying a filter to an object to create a nonchanging effect, such as a drop shadow behind text. Static effects are an easy way to enhance a Web page’s design with minimum effort, and often without scripting.
Dynamic visual effects bring a basic level of interactivity to Web documents. Dynamic effects require an event to prompt a change in the document—this can be an onmouseover or click event, a timer interval, or a sequence of script functions that call the new content states.
In this example, an interactive step is added to the previous television caption example, so that the caption transitioons only when the mouse pointer is over the inline image. Visual effects can be animated using a timer script. The following sample shows two filters, Alpha and Glowand two timer methods.
You can use timers to create cyclical effects. The following example shows a set of div elements cycling through a series of transitions. Web authors often use multiple graphics to indicate a user state for a single element, such as a navigation bar button. With filters, multiple graphics are no longer required—you can change the display of one graphic to indicate whether it is available for user interaction.
Best of all, this filterz all done in code and doesn’t require downloading additional graphics from a server. This example shows how both the BasicImage transutions Alpha filters can visually represent unavailable link states. As interactive objects, links can change state in response to mouse events, as this example demonstrates.
You can combine filters, transitions, and sophisticated programming to create complex and compelling visual designs and interactivity. The trwnsitions examples provide a glimpse of the versatile effects provided by filters.
The following example shows how you can combine the MaskFilter filter filter a series of style changes.
The Light filter is a complex visual filter. The following sample shows how you can combine the filter with mouse events to create a unique Web browsing experience. You can control the same Light filter with more sophisticated programming, as the following example shows. Transitions are time-varying filters that affect how a change of content is displayed.
One example is changing the src attribute of an image to display a new image on-screen. A transition provides an animated effect to display the new image. You can also apply transitions to make an object fade in or fade out by changing the visibility property. Transitions have methods and events to manage the timing of the effect. When a filter completes a display update or a transition finishes playing, the onfilterchange event is fired.
By adding an onfilterchange event handler to capture the completion of one transition, you can chain transitions together so they start one after another.