CSS Filter attribute syntax

Source: Internet
Author: User

CSS Filter
Style attributes:
It can be used in tags and is more widely used in <Table> <tr> <TD> <body>
<Center> <input> <font> <form> <frame> <label> <map> among other labels,
More importantly, it is available in labels.
Page switching effect:
Add "" between the front and end of the page ""
Note: duration is the duration of page switching. 3.000 represents 3 seconds and can be directly input.
You can enter 3; transition is the switching effect, from 1 to 23, a total of 22 different switching effects, of which 23
It is a random effect.
Filter effect:
More filters are used in Photoshop. use filters to create new ideas on the page!
Syntax: Style = "filter: filtername (fparameter1, fparameter2 ...)}
(Filtername indicates the Filter Name. fparameter1 and fparameter2 are filter parameters)
Filter description:
ALPHA: set the transparency level.
Blur: Creates a high-speed mobile effect, that is, a blur effect.
Chroma: Make special colors transparent.
Dropshadow: Creates a fixed shadow of an object.
Fliph: Create a horizontal image.
Flipv: Create a vertical image.
Glow: glow outside the edge of a nearby object.
Gray: grayscale the image.
Invert: reversed.
Light: Creates a light source on an object.
Mask: Creates a transparent mask on the object.
Shadow: Creates a fixed offset shadow.
Wave: ripple effect.
Xray: changes an object like X-rays.
1. filter: Alpha
Syntax:
Style = "filter: alpha (opacity = opacity, finishopacity = finishopacity, style = style,
Startx = startx, starty = starty, finishx = finishx, finishy = finishy )"
Note:
Opacity: start value. The value ranges from 0 to 100. The value 0 indicates transparency, and the value indicates the source image.
Finishopacity: target value.
Style: 1, 2, or 3
Startx: any value
Starty: any value
Example: filter: alpha (opacity = "0", finishopacity = "40", style = "2 ")
2. filter: blur
Syntax:
Style = "filter: blur (add = add, direction = direction,
Strength = strength )"
Note:
Add: generally 1, or 0.
Direction: angle, 0-degrees, step size: 45 degrees.
Strength: the number of results that increase, generally 5.
Example: filter: blur (add = "1", direction = "45", strength = "5 ")
3. filter: chroma
Syntax:
Style = "filter: chroma (color = color )"
Note:
Color: # rrggbb format, any.
Example: filter: chroma (color = "# ffffff ")
4. filter: dropshadow
Syntax:
Style = "filter: dropshadow (color = color, offx = offx, offy = offy, positive = positive )"
Note:
Color: # rrggbb format, any.
Offx: returns the offset of the X axis.
Offy: Y-axis deviation 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 )"
Note:
Color: Luminous color.
Strength: intensity (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)
Note:
Color: # rrggbb format.
Direction: angle, 0-degrees, step size: 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)
Note:
Add: generally 1, or 0.
Freq: deformation value.
Lightstrength: Deformation percentage.
Phase: Percentage of angular 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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.