Study notes on filters in CSS3 (static filters and dynamic filters)

this section introduces filters in css, including how to use static filters and dynamic filters. friends who don’t understand can refer to the following:

1. css static filter style (filter) (only supported by ie4.0 or above)

css static how to use filter style: { filter : filtername( parameters1, parameters2, ...) }

filter style brief description supports parameters

alpha: set the opacity, finishopacity, style, startx, starty, finishx, finishy, add, direction, strength of the image or text

blur: produce a dynamic blur effect in the specified direction and position add, direction, strength

chroma: transparent the selected color color

dropshadow: generate a shadow color in the specified direction and position , offx, offy, positive

fliph: flip the object in the horizontal direction

flipv: flip the object in the vertical direction

glow: glow color and strength around the object

gray: process the object in grayscale

invert: invert the color of the object

/>

light: simulate lighting on the object

mask: generate a mask color on the object

shadow: along the object edge generates shadow color, direction

wave: generates sine waveform add, freq, lightstrength, phase, strength in the vertical direction

xray: changes the color of the object depth, and draw black and white images

the above is the entire content of static filters. please note that css is case-sensitive!

2. css dynamic filters

dynamic filters can be used for pages add moving fade-in and fade-out and image transformation effects. it can be divided into two types: blend (mixing) and reveal (display). the former can make objects gradually disappear or appear, and the latter provides 24 kinds of image transformation effects. for the call of dynamic filters, in addition to the filter type, parameters, etc. that need to be defined in static filters, scripting language is also used to control its status.

first of all, before starting a dynamic effect, you need to apply (apply) and then play (play) the dynamic effect. you can also interrupt the dynamic effect (stop) while the dynamic effect is in progress. you can use the following method implementation:

object name.filters (filter value).apply()
object name.filters (filter value).play()
object name.filters( filter value).stop()

the filter status can be judged by "object name.filters (filter value).status". when the value is 0, it means that the filter has not been executed. when it is 1, it means that the filter has been completed, and when it is 2, it means that the filter is being executed.

when defining a filter, as mentioned above, there can be blending ("filter:blendtrans(duration=time value)", duration represents the time required for filter execution, in seconds) and display ("filter: revealtrans(duration=time value, transition=transition type)", the transition type is a value from 0 to 23).

filters are not yet officially recognized by w3c. filters are only part of microsoft's ie browser and cannot be used in netscape browsers. organizations that formulate relevant standards are discussing this, but have not yet reached a final conclusion. in my opinion, filters are a really fun and essential part of creating great visuals. filters save bandwidth and allow you to use text formatting when creating fantastic

visual designs without having to create huge text bitmaps first to achieve the same effect.

but because these features have not yet become a formal part of html, not all browsers can see these features. sometimes, you have to consider creating the same effect the traditional way, and of course, you have to continue stuffing huge gif files into web pages.
silence...silence...

3. detailed explanation of css filter filter

syntax:

STYLE="filter:filtername(fparameter1, fparameter2...)"

(filtername is the name of the filter, fparameter1, fparameter2, etc. are the parameters of the filter)

filter description:

alpha: set the transparency level
blur: create a high-speed movement effect, that is, a blur effect
chroma: make a special color transparent
dropshadow: create a fixed shadow of the object
fliph: create a horizontal mirror image
flipv: create a vertical mirror image
glow: add light to the outside of nearby objects
gray: grayscale the image
invert: invert color
light: create a light source on the object
mask: create a transparent mask on the object
shadow: create an offset fixed shadow
wave: ripple effect
xray: make the object look like it has been illuminated by x-rays

1. filter: alpha

syntax:

style="filter:alpha(opacity=opacity, finishopacity=finishopacity, style=style, startx=startx, starty=starty, finishx=finishx, finishy=finishy)"

description:
opacity: starting value, ranging from 0 to 100, 0 is transparent, and 100 is the original image.
finishopacity: target value.
style: 1 or 2 or 3
startx: any value
starty: any value

example: filter:alpha(opacity="0",finishopacity="75 ",style="2")

2. filter: blur

syntax:

style= "filter:blur(add = add, direction = direction, strength = strength)"

description:
add: generally 1, or 0.
direction: angle, 0 to 315 degrees, step size is 45 degrees.
strength: the value of effect growth, usually 5.

example: filter:blur(add="1",direction="45",strength="5")

3. filter: chroma

syntax:

style="filter:chroma(color = color)"

description: color: #rrggbb format, any.

example: filter:chroma(color="#ffffff")

4. filter: dropshadow

syntax:

style="filter:dropshadow(color=color, offx=offx, offy=offy, positive=positive)"

description:

color:#rrggbb format, any.
offx: x-axis deviation value.
offy: y-axis offset value.
positive: 1 or 0.

example:

filter:dropshadow(color="#6699cc",offx="5",offy="5",positive="1")

5. filter: fliph

syntax:

style="filter:fliph"

example: filter:fliph

6. filter: flipv

syntax: style="filter:flipv"

example: filter:flipv

7. filter: glow

syntax: style="filter:glow(color=color, strength=strength) "

description:
color: luminous color.
strength: strength (0-100)

example: filter:glow(color="#6699cc",strength="5")

8. filter: gray

syntax: style="filter:gray"

example: filter:gray

9. filter ：invert

syntax: style="filter:invert"

example: filter:invert

10. filter: mask

syntax: style="filter:mask(color=color)"

example: filter:mask (color="#ffffe0")

11. filter: shadow

syntax: filter:shadow(color=color, direction=direction)

description:
color : #rrggbb format.
direction: angle, 0-315 degrees, step size is 45 degrees.

example: filter:shadow (color="#6699cc", direction="135")

12. filter: wave

syntax: filter: wave(add=add, freq=freq, lightstrength=strength, phase=phase, strength=strength)

description:
add: usually 1, or 0 .
freq: deformation value.
lightstrength: deformation percentage.
phase: percentage of angle deformation.
strength: deformation strength.

example: filter: wave(add="0", phase="4", freq="5", lightstrength="5", strength="2")

13. filter: xray

syntax: style="filter:xray"

example: filter:xray