Home arrow DHTML arrow Page 4 - Color, Filters, and Other Style Sheet Properties
DHTML

Color, Filters, and Other Style Sheet Properties


Continuing with our multi-part series on style sheet properties, this fourth part of the series covers color, filters, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 12
September 20, 2007
TABLE OF CONTENTS:
  1. · Color, Filters, and Other Style Sheet Properties
  2. · Alphabetical Property Reference: Cursor
  3. · Alphabetical Property Reference: Elevation
  4. · Alphabetical Property Reference: Filters

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials