CSS3 example of implementing a filter effect

Source: Internet
Author: User
Recent projects will contact CSS3, the evil IE is not supported, search for a bit, found that the filter of IE is very useful, seemingly the Internet is the filter standardization, take time to organize a bit of IE filter effect remember please use IE browse Oh, interested friends can understand, I hope this article is helpful to you

Recent projects will contact CSS3, the evil IE is not supported, search for a bit, found that the filter of IE is very useful, seemingly the Internet is the filter standardization. Today first tidy up the filter effect of IE (please use IE to browse), tomorrow in the CSS3 corresponding effect written (please use the WebKit kernel to browse). , if the reader has other better articles, want to be able to share, welcome to join the Web front-end Communication Group (75701468) to share your experience.

IE Filter Filter
Alpha: Sets the transparency level.
Blur: Creates a high-speed motion effect, which is a blur effect.
Chroma: Make special color transparent.
DropShadow: Creates a fixed shadow of an object.
FLIPH: Create a horizontally mirrored picture.
FLIPV: Create a vertical mirror image.
Glow: Gaguang is outside the edges of nearby objects.
Gray: Grayscale the picture.
Invert: Inverse color.
Light: Creates lights on the object.
Mask: Creates a transparent mask on the object.
Shadow: Creates an offset fixed shadow.
Wave: ripple effect.
Xray: Causes the object to become as if it were irradiated by an X-ray.
Grayscale Grayscale
Sepia Brown
Saturation of saturate
Hue-rotate Hue Rotation
Invert inverse color
Opacity transparency
Brightness brightness
Contrast contrast ratio
Blur Blur
Drop-shadow Shadow

Filters: Transparency Effects

Syntax: Filter:alpha (opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx= Finishx,finishy=finishy)

Opacity: The starting value, the value is 0~100, 0 is transparent, and 100 is the original.
Finishopacity: Target value.
Style:1 or 2 or 3
StartX: Any value
Starty: Any value
FINISHX: Any value
Finishy: Any value

General transparency Effect: Filter:alpha (opacity=30);

Code:-webkit-filter:opacity (0.3); or opacity:0.3;

Rose Flower

Linear transparency: Filter:alpha (opacity=0, finishopacity=100, style=1, startx=0, starty=0, finishx=200, finishy=180);

Code: unkown;

Rose Flower

Radiation transparency: Filter:alpha (opacity=0, finishopacity=100, style=2);

Code: unkown;

Rose Flower

Soft light effect Filter:alpha (opacity=100, finishopacity=0,style=3);

Code: unkown;

Rose Flower

Filters: Projection Effects

Syntax: Filter:dropshadow (Color=color, OFFX=OFFX, Offy=offy, positive=positive)

Color: #rrggbb格式, arbitrary.
Offx:x axis deviation value.
Offy:y axis deviation value.
Positive: If "True" creates a visible projection for any non-transparent pixels. If False, a visible projection is established for the transparent portion of the pixel.

Projection effect: Filter:progid:dXImageTransform.Microsoft.DropShadow (color= #000000, offx=5,offy=5,positives=true);

Code:-webkit-filter:drop-shadow (5px 5px 0 #000000); or box-shadow:5px 5px 0 #000;

Rose Flower

Shadow effect: Progid:DXImageTransform.Microsoft.Shadow (color= #000000, direction=135,strength=10);

Code: unkown;

Rose Flower

Color effect: Progid:DXImageTransform.Microsoft.Chroma (color= #59A074);

Code: unkown;

Rose Flower

Mosaic: Filter:progid:dXImageTransform.Microsoft.Pixelate (maxsquare=3);

Code: unkown;

Rose Flower

Luminous effect: Filter:progid:dXImageTransform.Microsoft.Glow (color= #000000, strength=5);

Code: unkown;

Rose Flower

Horizontal flip: filter:fliph;

Code:-webkit-transform:rotatey (180DEG);

Rose Flower

Vertical flip: FILTER:FLIPV;

Code:-webkit-transform:rotatex (180DEG);

Rose Flower

Inverse color effect: filter:invert;

Code:-webkit-filter:invert (1);

Rose Flower

Black and white effect: Filter:gray;

Code:-webkit-filter:grayscale (1);

Rose Flower

X-ray Photo: Filter:xray;

Code:-webkit-filter:grayscale (1) invert (1);

Rose Flower

Filters: Blur Effects

Syntax: Filter:blur (add = Add, Direction = Direction, strength = strength)

ADD: Specifies whether the image has been altered to an Impressionist blur effect. 1 is true and 0 is false.
Direction: Angle, 0~315度, step is 45 degrees.
Strength: How many pixels are blurred by the width of the pixel, the default is 5 pixels.

Wind motion blur (angled): Filter:blur (add=true,direction=45,strength=30);

The code: temporarily No

Rose Flower

General Blur: Filter:progid:DXImageTransform.Microsoft.Blur (pixelradius=7);

Code:-webkit-filter:blur (3PX);

Rose Flower

Filters: Ripple Effects

Syntax: Filter:wave (add=add,freq=freq,lightstrength=strength,phase=phase, Strength=strength)

ADD: Whether it is scrambled, the default is "True".
Freq: How many full ripples are produced.
Lightstrength: Enhanced lighting, 0-100 integer value.
Phase: The offset of the sine wave, usually a value of 0, and a range of 0-100 integer values.
Strength: Represents the amplitude size.

Sine Ripple: Filter:wave (add=0, freq=60, Lightstrength=1, phase=0, strength=3);

Code: unkown;

Rose Flower

Gradient effect: filter:progid:DXImageTransform.Microsoft.Gradient (gradienttype=0, startcolorstr= "#000000", endcolorstr= "# FFFFFF ");

Code: Background:-webkit-linear-gradient (#000000 0, #ffffff 100%);


1. CSS3 Free Video Tutorial

2. Detailed CSS3 10 top commands

3. Brief description of how the Web designer uses the good CSS3 technology

4. CSS3 Making mouse button effect

5. CSS3 setting an instance of the RGB color

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.