Color, Filters, and Other Style Sheet Properties - Alphabetical Property Reference: Filters
(Page 4 of 4 )
filter (old style)
IE 4(Win) NN n/a Moz n/a Saf n/a Op n/a CSS n/a
Inherited: No
Sets the visual, reveal, or blend filter used to display or change content of an element. A visual filter can be applied to an element to produce effects such as content flipping, glow, drop shadow, and many others. A reveal filter is applied to an element when its visibility or appearance changes. The value of the reveal filter determines what visual effect is to be applied to the transition from hidden to shown (or vice versa). This includes effects such as wipes, blinds, and barn doors. A blend filter sets the speed at which a transition between visibility states occurs.
CSS Syntax
filter: filterType1(paramName1=value1, paramName2=value2,...)
filterType2(paramName1=value1,...) ...
Value
Each filter property may have more than one space-delimited filter type associated with it. Each filter type is followed by a pair of parentheses, which may convey parameters about the behavior of the filter for the current element. A parameter generally consists of a name/value pair, with assignment performed by the equals symbol. See the “Notes” section below for details on filterType values and parameters.
Initial Value None.
Example .fastStuff {filter: blur(add=true, direction=225)}
Applies To
body , button , img , input , marquee , table , td , textarea , tfoot , th , thead , tr , and absolute-positioned div and span elements.
Object Model Reference
[window.]document.getElementById("elementID").filters["filterName"]
Notes
First-generation filters (which continue to be supported at least through IE 7) are divided into three broad categories: visual, reveal, and blend. Each category has its own parameter names. You can mix categories within a single filter property assignment and have quite a bit of fun experimenting with the combinations. Observe carefully the limitations about the elements to which you may assign filters.
The visual filters and their parameters are as follows:
alpha()
Controls transparency level. The opacity and finishopacity parameters can be set from transparent ( 0 ) to opaque ( 100 ). The style parameter sets the opacity gradient shape: uniform ( 0 ), linear ( 1 ), radial ( 2 ), or rectangular ( 3 ). startX and startY set the horizontal and vertical coordinates for opacity gradient start, whereas finishX and finishY set the horizontal and vertical coordinates for opacity gradient end.
blur()
Gives the element the appearance of motion. The add parameter specifies whether to add the original image to the blurred image ( 1 ) or to omit it ( 0 ). direction sets the angle of the blurred image relative to the original image location: above ( 0 ; above-right ( 45 ); right ( 90 ); below-right ( 135 ); below ( 180 ); below-left ( 225 ); left ( 270 ); above-left ( 315 ). strength indicates the number of pixels for the blurred image to extend.
chroma()
Sets a color transparent. The color parameter specifies the hexadecimal triplet value of the color to be made transparent.
dropShadow()
Creates an offset shadow for apparent depth. The color parameter sets the hexadecimal triplet value of color for drop shadow. offx and offy specify the number of pixels between the element and the drop shadow along the x and y axes (positive values to the right/down; negative to the left/up). The positive parameter specifies whether only positive pixels generate drop shadows ( 1 ) or transparent pixels as well ( 0 ).
flipH()
Creates a horizontally mirrored image of the element.
flipV()
Creates a vertically mirrored image of the element.
glow()
Adds radiance to outer edges. The color parameter sets the hexadecimal triplet value of the color for the radiance effect and strength sets the radiance intensity ( 1-255 ).
gray()
Removes colors but retains luminance.
invert()
Reverses the hue, saturation, and brightness (HSV) levels.
light()
Shines a light source on the element (numerous filter method calls are available to set specific types of light sources, locations, intensities, and colors).
mask()
Creates a transparent mask. The color parameter sets the hexadecimal triplet value of the color applied to transparent regions.
shadow()
Displays the element as a solid silhouette. The color parameter sets the hexadecimal triplet value of the color used for shadows and direction sets the angle of the shadow relative to the original image location: above ( 0 ); above-right ( 45 ); right ( 90 ); below-right ( 135 ); below ( 180 ); below-left ( 225 ); left ( 270 ); above-left ( 315 ).
wave()
Renders the element with a sine wave distortion along the x-axis. The add parameter specifies whether to add the original image to waved image ( 1 ) or not ( 0 ). freq sets the number of waves to be applied to visual distortion, light sets the light strength ( 0- 100 ), phase sets the percentage offset for the sine wave ( 0-100 corresponding to to 360 degrees), and strength sets the wave effect intensity ( 0-255 ).
xRay()
Renders only the edges.
filter (new style)
The blend and reveal transition filters and parameters are as follows:
blendTrans()
Fades the element in or out. The duration parameter sets the floating-point value ( seconds.milliseconds ) of how long the transition effect should take.
revealTrans()
Sets a transition effect between appearance states of an element. The duration param eter sets the floating-point value (seconds.milliseconds ) of how long the transition effect should take. transition is a key integer that corresponds to one of the following transition types.
Value | Transition type | Value | Transition type |
0 | Box in | 12 | Random dissolve |
1 | Box out | 13 | Split vertical in |
2 | Circle in | 14 | Split vertical out |
3 | Circle out | 15 | Split horizontal in |
4 | Wipe up | 16 | Split horizontal out |
5 | Wipe down | 17 | Strips left down |
6 | Wipe right | 18 | Strips left up |
7 | Wipe left | 19 | Strips right down |
8 | Vertical blinds | 20 | Strips right up |
9 | Horizontal blinds | 21 | Random bars horizontal |
10 | Checkerboard across | 22 | Random bars vertical |
11 | Checkerboard down | 23 | Random |
Both transition filters have a set of three methods: apply() , play() , and stop() . Use apply() to freeze the element’s display while you change the element’s visibility or other visual property; then invoke the play() method on the filter to let the transition be seen by the user:
document.getElementById("myImg").filters["revealTrans"].apply() ;
document.getElementById("myImg").src = "newPix.jpg";
document.getElementById("myImg").filters["revealTrans"].play();
A style sheet rule for the element may have been set to the following:
img {filter: revealTrans(transition=2, duration=3)}
When the script statements execute, the change from one image to another occurs through a “circle in” reveal transition.
filter (new style)
IE 5.5 NN n/a Moz n/a Saf n/a Op n/a CSS n/a
Inherited: No
Sets the static or transition filter used to display or change content of an element with the help of the DXImageTransform ActiveX control, delivered with IE 5.5 or later for Windows. The purpose of the new filter mechanism is the same as the old style one, but the syntax for invoking the ActiveX control is new, as are many of the filter names.
Alphabetical Property Reference
CSS Syntax
filter: progid:DXImageTransform.Microsoft.filterType1(paramName1=value1,
paramName2=value2,...) progid:DXImageTransform.Microsoft.filterType2(paramName1=value1,...) ...
Value
Each filter type must be preceded by the reference to the ActiveX control (progid: DXImageTransform.Microsoft.), and multiple filter types for a single filter style property are space delimited. Each filter type is followed by a pair of parentheses, which may convey parameters about the behavior of the filter for the current element. A parameter generally consists of a name/value pair, with assignment performed by the equals symbol. Filter types that control transitions also have methods that scripts invoke to freeze the display while some visible property of the element changes (also under script control) and then play the transition. (See the “Notes” section below for information about filterType values and parameters.
Initial Value None.
Example
.fastStuff {filter: progid:DXImageTransform.Microsoft.MotionBlur(add=1,
direction=225)}
Applies To All elements.
Object Model Reference
[window.]document.getElementById("elementID").filters[
"DXImageTransform.Microsoft.filterName"]
Notes
Documenting in detail ActiveX controls that work only on Windows versions of Internet Explorer exceeds the scope of this book. But by way of introduction to what the new filter scheme offers in IE 5.5 and later, the following table lists the static and trasition filters available in the DXImageTransform ActiveX control, along with descriptions of what they do. For specific details of properties that go into style sheet rules, as well as the scriptable properties and methods available to each filter, visit http://msdn.microsoft.com/workshop/ author/filter/filters.asp.
| Filter name | Type | Description |
|---|
| Alpha() | static | Controls transparency level (opacity) |
| Barn() | transition | A barn-door transition effect, with properties for speed, motion, and orientation |
| BasicImage() | static | Sets a variety of filter styles (mirror, opacity, grayscale, etc.) for all kinds of elements, but under script control can also rotate the element and alter its color mask |
| Blinds() | transition | A Venetian-blind transition effect, with properties for direction and thickness of the slats |
| Blur() | static | Controls the fuzziness of the element |
| | | filter (new style) |
| Filter name | Type | Description |
| Checkerboard() | transition | A checkboard transition effect with properties for direction, speed, and square sizes |
| Chroma() | static | Controls the transparency of a specific color |
| Compositor() | static | Combines color filter effects |
| DropShadow() | static | Creates an offset shadow for apparent depth, with properties for color, and depth of shadow |
| Emboss() | static | Controls an embossed texture effect |
| Engrave() | static | Controls an engraved texture effect |
| Fade() | transition | A blended transition between views, with properties for speed and the degree of overlap of both views |
| Glow() | static | Controls radiance of outer edges |
| Gradiant() | statics | Applies a colored gradient texture on the element’s background |
| GradientWipe() | transition | A wipe transition using a gradient blend at the wipe line, with properties for speed, thickness of the gradient, and direction |
| ICMFilter() | static | Applies an external Image Color Management profile to the element |
| Inset() | transition | A wipe transition that works along horizontal and vertical axes, but diagonally from one corner to its opposite |
| Iris() | transition | A zoom-style transition with properties for speed, direction (in or out), and iris shape (e.g., circle, cross, diamond, plus, square, star) |
| Light() | static | Controlled exclusively through scripts, adds effect of light source directed at the element |
| MaskFilter() | static | Overlays a transparent mask for a color |
| Matrix() | static | Controls rotation, flipping, and scaling of element |
| MotionBlur() | static | Simulates motion via artificial blurring |
| Pixelate() | transition | Blends between views via an expansion/contraction and blurring/focusing of the content |
| RadialWipe() | transition | Blends between views via your choice of styles (clock, wedge, radial) |
| RandomBars() | transition | Blends between views via expanding/contracting bars, with properties for orientation and speed |
| RandomDissolve() | transition | Blends between views through random pixel changes |
| Shadow() | static | Displays element content as a silhouette |
| Slide() | transition | Blends between views through banded sliding of various types |
| Spiral() | transition | Blends between views through spiral reveals |
| Stretch() | transition | Blends between views through various stretch-style reveals |
| Strips() | transition | Blends between views with striped effect |
| Wave() | static | Adds sine-wave distortion to the element |
| Wheel() | transition | Blends between views via wheel spokes emanating from the element center |
| ZigZag() | transition | Blends between views via removal of rows of bricks |
Successful deployment of these filters, especially on complex content, requires extensive experimentation and testing to make sure that your combination doesn’t crash the browser.
Please check back next week for the continuation of this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.
|
|
