CSS Filters - Nov 02
Examples at end of document
Alpha
filter: Alpha(Opacity=starting opacity level, FinishOpacity=finish opacity level, Style=gradient style, StartX=gradient start X position, StartY=gradient starting Y position, FinishX=gradient finishing X position, FinishY=gradient finishing Y position)
Opacity is the only required value. The starting opacity is either the uniform opacity level for the filter (a number, 0 through 100, 100 being opaque). FinishOpacity is used when you want to have a gradient of the other value it fades to. StartX and StartY are the coordinates on the filtered object that the gradient starts at (where it is the opacity value), while FinishX and FinishY are the end points (the FinishOpacity value). Style is the type of gradient to use - it accepts a number between 0 and 3, where 0 represents a uniform gradient, 1 a linear gradient, 2 a radial gradient, and 3 a rectangular gradient. This effect is most noticeable over a nonsolid background.
Motion Blur
Filter: Blur(Add=add original image, Direction=360-degree direction, Strength=strength of blur)
Add determines whether to use the original object in the blur, and it takes a value of 0 (no) or 1 (yes). Using "0" works better for images, while "1" works better for text. Direction is the degree the blur should move off in, 0-360. Strength is the distance the blur should go from the source.
Chroma
Chroma takes a color that you specify and makes it disappear, much like setting a transparent pixel on a GIF. But it works on JPEGs and PNGs, too, as well as on text (though if the text doesn't have other filters on it, you won't see anything if you chroma it).
Filter: Chroma(Color=Hexadecimal color that will disappear)
There is only one value to set - the color you want to disappear. Set it in hex format (#RRGGBB).
Drop Shadow
Filter: DropShadow(Color=The color of the drop shadow, OffX=How many pixels Horizontally, OffY=How many pixels Vertically, Positive=What gets shadowed, visible or invisible pixels)
Color is the color of the drop shadow, expressed, as always, in hex format (#RRGGBB). OffX and OffY are the number of pixels the drop shadow should be from the object. Positive is a Boolean (0 or 1) value; if "0," then the transparent pixels are shadow; if "1," then the nontransparent pixels are shadowed.
Flip
Filter: FlipH
or conversely
Filter: FlipV
Glow
Filter: Glow(Color=Hex color, Strength=Strength of the glow)
Grayscale
Filter: Gray
Invert
Yet another filter that has no arguments. It inverts the image to its photographic negative.
Filter: Invert
Mask
This filter takes the visible pixels and makes them invisible, and the invisible pixels and makes them visible in the color specified.
Filter: Mask(Color=Color of the mask)
Shadow
Shadow is a cross between glow and drop shadow. It applies itself like a drop shadow, but instead of rendering a solid color, it renders out a glow-like effect, or an anti-aliased drop shadow. However, it doesn't quite give you the fine control of either the glow or the drop-shadow filter.
Filter: Shadow(Color=Hex color of the shadow, Direction=Degree of the shadow)
Wave
Wave does one of those trippy distortions
Filter: Wave(Add=Weather the original object is added back in, Freq=Number of waves, LightStrength=strength of the shading, Phase=phase offset, Strength=strength of the effect)
Add is a Boolean (0 or 1) expression that determines whether the original image gets mixed back into the final effect. Freq (frequency) determines how many "waves" appear in the effect. Light strength effects the lightness and darkness of the sides of the waves. Phase changes the shape of the wave and takes a value between 0 and 360. And Strength determines the amplitude of the wave.
X-Ray
The X-ray filter also takes no arguments, and is an odd one. It drops all the color information from the image like the gray filter, then inverts it, except for the black or white pixels. Not sure when one would use it.
Filter: X-ray
CSS Filters - Example Code - Nov 02
Can link filters by - Filter:Glow (blah) DropShadow (blah); - Just leave one gap.
Elements may need width and height for CSS to work.
Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)
Filter: Blur(Add = 1, Direction = 225, Strength = 10)
Filter: Chroma(Color = #FF0000)
Filter: DropShadow(Color=#0000FF, OffX=2, OffY=2, Positive=1)
Filter: FlipV
Filter: Glow(Color=#FF0000, Strength=4)
Filter: Gray
Filter: Invert
Filter: Mask(Color=#FF0000)
Filter: Shadow(Color=#0000FF, Direction=225
Filter: Wave(Add=0, Freq=5, LightStrength=20, Phase=20, Strength=20)
Filter: Xray
