Abakada ~ Back to Basics CSS Attributes
This section describes the properties, methods, and events associated with the visual and transition filters.
| Properties |
| duration |
Sets the default length of time the transition will take to complete. |
| enabled |
Specifies whether the filter is enabled or disabled. |
| status |
Returns the current status of the transition. |
| Event |
| onfilterchange |
Fires when a visual filter changes or completes a transition. |
Sets the default length of time the transition will take to complete.
style="FILTER: transitiontype(duration=duration,
transition=transitionshape)"
| duration |
Length of time the transition should take to complete. Value, float. Value is expressed in seconds.milliseconds (0.000). Read write at run time. If transition has been applied or is playing, read-only. |
| transitionshape |
Shape of the transition (reveal transition only). Integer. Value from 0 to 23. For information on the available transition shapes, see the Reveal Transition Filter topic. |
A transition's playback duration can also be set as a parameter of the play
method.
Specifies whether the filter is enabled or disabled.
object.filter.enabled=fValue
| fValue |
Boolean value indicating whether the filter is enabled (true) or disabled (false). The property is read-write. |
<img id=img1 src="sample.jpg"
style="filter:blur(strength=50) flipv()">
<script language="JavaScript">
// disable the flip filter
img1.filters[1].enabled = false;
</script>
Returns the current status of the transition.
nStatus = object.filter.status
| status |
Integer. Values are 0 (transition stopped), 1 (transition applied), or 2 (transition playing). Read-only. |
Applies a transition to the designated object.
object.filters.item(index).apply()
| object |
Identifier of the object to which the filter is to be applied. |
| index |
Integer. Index (position in the collection of transitions for this object) number of the transition. Value can be 0-n, where n is the last transition made available to this object. |
Plays the transition.
object.filters.item(index).play(duration)
| object |
Identifier of the object to which the filter has been applied. |
| duration |
Float, seconds.milliseconds (0.000). Valid values are 0.0–N.n. Optional parameter, read-write at run time. |
If a playback duration is explicitly specified as a parameter of this method, it will override the Duration property assigned to the transition for that instance of the transition's playback.
Stops transition playback.
object.filters.item(index).stop()
| object |
Identifier of the object to which the filter is attached. |
| index |
Index number of the transition whose playback is to be stopped. |
Fires the onfilterchange
event.
Adds an ambient light to the Light
filter effect object.
object.filters.Light.addAmbient(R,G,B,strength)
| object |
Name of the object to which the Light filter is applied. |
| R |
Red value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| G |
Green value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| B |
Blue value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| strength |
Intensity setting. |
Ambient light is nondirectional light that sheds parallel beams perpendicular to the surface of the page. Ambient light has color and strength values and can be used to add more color to the page; it is often used in conjunction with other lights. The following example shows how to create a blue ambient light with a fairly low intensity.
object.filters.Light.addAmbient(0,0,255,10)
Adds a cone light to the Light filter effect object to cast a directional light on the page.
object.filters.Light.addCone(
x1,y1,z1,x2,y2,R,G,B,strength,spread)
| object |
Name of the object to which the Light filter is applied. |
| x1, y1, z1 |
Source light's coordinates. |
| x2, y2 |
Target focus coordinates. Note that the z2=0 is implied. |
| R |
Red value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| G |
Green value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| B |
Blue value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| strength |
Intensity setting. Integer value. Note: strength specified pertains to the target coordinates. When the light is later moved, the strength is re-scaled to still pertain to the new target. |
| spread |
Angle of light spread in the relationship between the vertical position of the light source and the surface of the visual object. 0 to 90 degrees. Low spread (such as low integer values) produces a smaller shaped cone of light. High angle of spread produces an oblique oval or circle of light. |
The cone light fades with distance from the target x,y position. It displays a hard edge at the near edge of the cone light's focus and fades gradually as it reaches the cone light's distance threshold.
Adds a point light source, like a light bulb.
object.filters.Light.addPoint(x,y,z,R,G,B,strength)
| object |
Name of the object to which the Light filter is applied. |
| x, y, z |
Point light's coordinates. |
| R |
Red value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| G |
Green value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| B |
Blue value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| strength |
Intensity setting. Integer value. |
Intensity on the page is controlled by the angle of light on the surface. Add several for great multipoint gradients.
Changes the light color for any light on the page.
object.filters.Light.changeColor(
lightnumber, r, g, b, fAbsolute)
| object |
Name of the object to which the Light filter is applied. |
| lightnumber |
Identifying number for the light, for use in script. |
| r |
Red value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| g |
Green value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| b |
Blue value, integer from 0 to 255. 0 is lowest saturation, 255 is highest. |
| fAbsolute |
If this flag is true (nonzero), changeColor sets the value to be that new value. If this flag is false (zero), changeColor increments or decrements the color value by that amount. |
Changes the intensity of the light.
object.filters.Light.changeStrength(
lightnumber, strength, fAbsolute)
| object |
Name of the object to which the Light filter is applied. |
| lightnumber |
Identifying number for the light, for use in script. |
| strength |
New intensity. |
| fAbsolute |
If this flag is true (nonzero), changeStrength sets the strength value to be the new value. If this flag is false (zero), changeStrength increments or decrements the strength value by that amount. |
Deletes all lights associated with the specified Lights Filter.
object.filters.Light.Clear
| object |
Name of the object to which the Light filter is applied. |
This will clear all light sources on the object.
Moves the light effect on the page.
object.filters.Light.moveLight(
lightnumber, x, y, z, fAbsolute)
| object |
Name of the object to which the Light filter is applied. |
| lightnumber |
Identifying number for the light, for use in script. |
| x, y, z |
Location to move the light to. |
| fAbsolute |
Whether the movement is absolute or relative. |
For cone lights, this method changes the position of the light's focus, the target x,y values. For point lights, this method changes the source location, the source x,y,z values. This method has no effect for ambient lights.
CSS Filters CSS Transition Effects