Please add the author’s wechat official account. If there are new articles in the future, I will push them to you directly. Thank you very much.

The foreword 0.

Note: if an image cannot be loaded in an article, please go to another blog.

  • Jane’s book
  • CSDN

Recently, I found that Apple used the blur effect in many places.

Although the Gauss effect is cool, but we as front end personnel, how to imitate this effect?

This brings us to a CSS 3 property called Filter.

1.Filter

CSS filter: Provides graphic effects, such as blur, sharpen or element discoloration. Filters are usually used to adjust images, backgrounds and borders for rendering.

Some basics of Filter:

The name of the instructions
The initial value none
Applicable elements All elements; In SVG, it applies to container elements excluding def elements and all graphic elements
inheritance No inheritance
Apply effect Visual processing
Add a version CSS3
JS grammar object.style.WebkitFilter="grayscale(100%)"

About applicable browser version:

Usually recommend you or use Chrome browser to view the effect.

In addition, I would like to add the compatibility instructions given on MDN.

In addition, although Filter is not inherited in the property introduction, it is actually very similar to Opacity, which will cause problems in its children.

This is where we need another element, the Filter () function.

But let’s take it a step by step and move on to Filter.

Now that we’ve covered the basics of using Filter, let’s look at its properties.

The property name Attribute is introduced Fill in the way
none There is no effect The default value
grayscale gray The percentage
sepia brown The percentage
saturate saturation The percentage
hue-rotate Hue rotation deg
invert The color The percentage
opacity transparency The percentage
brightness brightness The percentage
contrast contrast The percentage
blur The fuzzy px
drop-shadow shadow h-shadow v-shadow blur spread color

Now that we know what the properties are, let’s take a look.

How these attributes are used.

2. Attribute writing

2.1 Grayscale: grayscale

The sample code

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:grayscale(1); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > grayscale: gray < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Grayscale will take our photos and turn them into gray, essentially turning them from color to black and white.

Note:

  • If the value is 100%, the image will be converted to gray scale completely, and if the value is 0%, the image will have no change.
  • Values between 0% and 100% are linear multipliers of the effect.
  • If not, the W3C says the default value is 0, but the actual test should be 100%.

2.2 Sepia: brown

The sample code

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:sepia(1); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > sepia: brown < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Sepia converts the image to dark brown.

After processing can achieve a similar “old photo” yellowing feeling.

In addition, note:

  • A value of 100% is completely dark brown and a value of 0% has no change in the image.
  • Values between 0% and 100% are linear multipliers of the effect.
  • If not, the W3C says the default value is 0, but the actual test should be 100%.

2.3 Saturate: Saturate

Sample code:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:saturate(4); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > saturate: saturation < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Saturate is used to convert image saturation.

Although converted to 0, the implementation looks similar to “grayscale”.

However, saturation can be set to exceed the original image color.

In addition, note:

  • A value of 0% indicates complete unsaturated, while a value of 100% indicates no change in the image.
  • The other values are linear multipliers of the effect.
  • Values above 100% are allowed and have higher saturation.
  • If the value is not set, the default value is 1.

2.4 Hue-rotate: Hue rotation

Sample code:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:hue-rotate(90deg); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > hue - rotate: hue rotate < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Hue -rotate applies hue rotation to an image.

Value sets the value of the color ring Angle to which the image will be adjusted.

Note:

  • If the value is 0deg, the image has no change.
  • If the value is not set, the default value is 0deg.
  • While there is no maximum value, anything above 360deg is like going around again.

2.5 Invert: Invert

Sample code:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:invert(1); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > invert: color < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Invert is the invert input image.

Just like the film on our camera.

Note:

  • 100% value is completely reversed.
  • If the value is 0%, the image has no change.
  • Values between 0% and 100% are linear multipliers of the effect.
  • If the value is not set, the default value is 0.

2.6 the transparency

Sample code:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:opacity(.2); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > opacity: transparency < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Opacity is the degree of transparency of an image.

Note:

  • A value of 0% indicates complete transparency, while a value of 100% indicates no change in the image.
  • Values between 0% and 100% are linear multipliers of the effect and are also equivalent to image samples multiplied by number.
  • If the value is not set, the default value is 1.
  • This function is similar to the existing opacity property, except that some browsers provide hardware acceleration through filter to improve performance.

2.7 the brightness

Sample code:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:brightness(2); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > brightness: brightness < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Brightness is to add a linear multiplication to the picture to make it look brighter or darker.

Note:

  • If the value is 0%, the image will be completely black. If the value is 100%, the image does not change.
  • Other values correspond to linear multiplier effects.
  • A value of more than 100% is ok, and the image will be brighter than before.
  • If no value is set, the default is 1.

2.8 contrast: contrast

Sample code:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:contrast(2); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > contrast: contrast < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Contrast is to adjust the contrast of an image.

Note:

  • If it’s 0 percent, it’s going to go completely black.
  • The value is 100%. The graph stays the same.
  • Values can exceed 100%, meaning lower comparisons will be applied.
  • If no value is set, the default value is 1.

It’s a blur

Sample code:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:blur(2px); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > blur: fuzzy < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Finally, the big one. Blur.

Blur is the setting of a Gaussian blur on an image.

The “radius” value sets the standard deviation of the Gaussian function, or how many pixels are fused together on the screen, so larger values are blurry;

Note:

  • If no value is set, the default is 0;
  • This parameter sets CSS length values, but does not accept percentage values.

2.10 drop-shadow: indicates the shadow

Sample code:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:drop-shadow(5px 5px 5px #ccc); } h3{ margin: 0; text-align: center; font-size: 40px; } < / style > < / head > < body > < div > < img SRC = "IMG_3479. JPG" > < / div > < h3 > drop shadow: shadow < / h3 > < / body > < / HTML >Copy the code

Effect:

Explanation:

Drop -shadow sets a shadow effect on the image.

A shadow is an offset version of a mask that can be drawn in a particular color and can have a degree of blurring underneath the image.

The function accepts a value of type (defined in CSS3 context),

Except the “inset” keyword is not allowed.

This function is similar to the existing box-shadow box-shadow property;

The difference is that with filters, some browsers offer hardware acceleration for better performance.

Here’s a review of the box shadow properties:

  • (must)
    • These are the two values that set the shadow offset. Set the horizontal distance. A negative value causes the shadow to appear to the left of the element. Set the vertical distance. A negative value causes the shadow to appear above the element. View possible units. If both values are 0, the shadow appears directly after the element (if and/or is set, it will blur).
  • (optional)
    • This is the third code> value. The larger the value, the more obscure the shadow will become larger and lighter. Negative values are not allowed. If not set, the default is 0 (the edge of the shadow is very sharp).
  • (optional)
    • This is the fourth value. A positive value causes the shadow to expand and grow, while a negative value causes the shadow to shrink. If not set, the default is 0 (the shadow will be the same size as the element). Note: Webkit, and some other browsers do not support the fourth length and will not render if it is added.
  • (optional)
    • View possible keywords and tags for the value. If not specified, the color value is browser – based. In Gecko (Firefox), Presto (Opera), and Trident (Internet Explorer), the value of the colorcolor attribute is applied. In addition, WebKit shadows are transparent if the color value is omitted.

2.11 URL: User-defined XML file

Explanation:

The URL function takes an XML file that sets an SVG filter and can contain an anchor to specify a specific filter element.

Introduction method:

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }Copy the code

2.12 Compound writing

Sample code:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> lI Peng --> QQ:3206064928</title>  div{ width: 467px; height: 700px; border: 1px solid #000; margin: 0px auto; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } img{ width: 100%; height: 100%; } div:hover{ -webkit-filter:contrast(175%) brightness(70%); } h3{ margin: 0; text-align: center; font-size: 20px; } </style> </head> <body> <div> <img SRC =" img_3479.jpg "> </div> <h3> You can combine any number of functions to control rendering. The following example can enhance the contrast and brightness of an image. </h3> </body> </html>Copy the code

Effect:

Explanation:

You can combine any number of functions to control rendering.

For example, to enhance the contrast and brightness of the image at the same time.

3. Filter () function

The following is from W3Plus.

Most of the time, you just want to adjust the background of an element, and you don’t want it to affect other elements. In addition, filter() is particularly important if there is no baw-filter attribute. Before you read any further, it is important to note that filter() is not equal to the filter attribute described earlier. Simple to understand, one is a function, one is a property. So what we’re going to talk about today is filter().

To distinguish it from the filter attribute, the filter() function takes two arguments:

filter(<url>, <filter-function-list>)Copy the code

Where is an image, which is a filter.

The two together will return a new processed image.

Such as:

.element {
    background: filter(url(path/to/img.jpg), blur(5px)); 
}Copy the code

Therefore, you can apply filter effects to images and fill them with elements such as background-filter, background-opacity, background-blur, etc.

# # # # note:

  • Filter functions defined in the specification
  • Working with background-size properties can be buggy
  • Support for animation
  • Need to add prefix: -webkit-filter()

It’s also worth mentioning that backdrop filter and Filter () can use CSS3 transition and animation for slick transitions or animations, and even JavaScript.

4. Afterword.

I finished it in five hours.

It took a lot of time to find the data.

But it was done and sent to you, and hopefully you’ll remember to read it when you use it in the future.

Well, I’m going to eat, too. Bye!

Author: Li Peng

QQ ：3206064928

WeChat: lipeng_0524

Harassment is welcome.

This article is not reproduced at will, the author reserves the right to pursue legal action.