Home >Web Front-end >CSS Tutorial >Introduction to css filter attribute syntax_Basic tutorial

Introduction to css filter attribute syntax_Basic tutorial

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 12:08:171661browse

css filter
Style attribute:
Can be applied in tags, and can be widely used in

Introduction to css filter attribute syntax_Basic tutorial

and other tags,
More importantly, it can be used in tags.
Page switching effect:
Add "" between the front and the page
Explanation: duration is the length of time for page switching, 3.000 means 3 seconds, generally you can enter 3 directly
; transition is the switching effect, there are 22 different switching effects from 1-23, of which 23
is a random effect.
Filter effect:
You have used a lot of Photoshop filters, so use filters on the page to create new meanings!
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 moving 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 the image.
FlipV: Create a vertical mirror image.
glow: Add light outside the edges of nearby objects.
gray: Grayscale the image.
invert: Invert the 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 Same as x-ray exposure.
1. Filter:alpha
Syntax:
STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,
StartX=startX,StartY= startY, FinishX = finish BR>Style: 1 or 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)"
Description:
Add: Generally 1, or 0.
Direction: angle, 0-315 degrees, step size is 45 degrees.
Strength: value of effect growth, usually 5 is enough.
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, arbitrary.
Offx: X-axis deviation value.
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)"
Description:
Color: Glow color.
Strength: Intensity (0-100)
Example: filter:Glow(Color="#6699CC",Strength="5")
8 filters :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:General is 1, or 0.
Freq: deformation value.
LightStrength: deformation percentage.
Phase: angle deformation percentage.
Strength: deformation intensity.
Example: filter:wave(Add= "0",Phase="4",Freq="5",LightStrength="5",Strength="2")
13. Filter: Xray
Syntax:
STYLE="filter: Xray"
Example:filter:Xray

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Why establish web standards and the benefits of web standardsNext article：Why establish web standards and the benefits of web standards

See more

Introduction to css filter attribute syntax_Basic tutorial

Related articles