CSS Attributes Index   CSS Filters

---

Averages the pixels of the visible object for a specified length and direction, creating the impression that the object is moving at high speed.

{ filter: blur ( add=add, direction=direction, strength=strength ) }

add	Boolean switch specifying whether to add the original image to the motion-blurred image. If true ( default ), the image is added to the motion-blurred image; if false, the image is not added to the motion-blurred image.
direction	Direction of the motion blur is clockwise from the vertical orientation of the object, rounded to 45-degree increments. The default value is 270 ( left ). Possible values are shown in the following table. 0 Top 45 Top right 90 Right 135 Bottom right 180 Bottom 225 Bottom left 270 Left 315 Top left
strength	Integer value that specifies the number of pixels the blur will extend. The default is 5 pixels.

Transition filters have one associated event, onfilterchange, which fires whenever a filter is applied or changed. This event can be used to script the srcFilter property on the event object, and then supplies all the necessary information about the event. In this way a script can know when a transition has completed.

The following example sets a blur filter with an initial strength of one on an image of a sphere. When the page loads the onfilterchange event of the image is fired. Setting the strength and direction properties on the blur filter causes the onfilterchange event to fire repeatedly, terminating finally when the strength reaches 200.

<script language="JavaScript">
function chg ( obj ) {
   with ( obj.filters ( 0 ) ) {
      if ( strength < 300 ) strength += 1;
   }
}
</script>

<img src="../shared/sample.jpg" width=100 height=100 style="cursor:hand"
   onclick="this.style.filter='blur ( add=1, strength=1, direction=225 ) '"
   onfilterchange="chg ( this )"
   onclick="this.style.filter=''">

 Show me 

You can create a nice effect for fonts by setting add to 1.

For the direction parameter, negative values or values larger than 360 degrees will wrap around to their equivalent angle ( for example, -45 degrees is equivalent to 315-degree orientation ). This allows mathematical manipulations to be carried out easily in code.

CSS Filter Properties and Methods