CSS Filter techniques and details that you don't know, css Filter techniques and details

CSS Filter techniques and details that you don't know, css Filter techniques and details

This article mainly introduces the uncommon usage of CSS filters, hoping to provide readers with something to do!
OK. Enter the text below. The filter described in this article refers to the filter after CSS3 is released. It is not a filter in the IE series. The syntax is as follows, if you have not touched this attribute, You can first understand it in MDN-filter:
'''
{
Filter: blur (5px );
Filter: brightness (0.4 );
Filter: contrast (200% );
Filter: drop-shadow (16px 16px 20px blue );
Filter: grayscale (50% );
Filter: hue-rotate (90deg );
Filter: invert (75% );
Filter: opacity (25% );
Filter: saturate (30% );
Filter: sepia (60% );
'''
'''
/* Apply multiple filters */
Filter: contrast (175%) brightness (3% );
 
/* Global values */
Filter: inherit;
Filter: initial;
Filter: unset;
}
'''
# Basic usage
Let's take a look at the effects of several filters:
! [] (Http://upload-images.jianshu.io/upload_images/8373224-cb33f949395b0f60? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

You can use hover to remove a filter and observe its effect.
In simple terms, CSS filters provide graphic effects similar to PS, such as blur, sharpening, or element color. It is usually used to adjust the rendering of images, backgrounds, and boundaries. This article will focus on these filters to see how they can be used or how they can be used.

! [] (Http://upload-images.jianshu.io/upload_images/8373224-3eae5b43397c214d.png? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

# Common usage
Since the title is a tip and detail you don't know, we will not repeat some of the common usage. We usually see many CSS filters for usage:

-Use 'filter: blur () 'to generate the glass effect.

-Use 'filter: drop-shadow () 'to generate the overall shadow effect.

-Use 'filter: opacity () 'to generate transparency

If you are not familiar with the above techniques, you can use Baidu Google a little. Here we will introduce some of the common filter usage and some small details:
# Contrast/brightness-hover brightening Image
The buttons on the page usually have hover/active color changes to enhance interaction with users. However, there are few hover interactions in some images. You can use 'filter: contrast () 'or 'filter: brightness ()' to view hover images, adjust the contrast or brightness of the image to focus on the user's field of view.
'Brightness indicates brightness, while contrast indicates contrast. '

Of course, this method also applies to buttons. The simple CSS code is as follows:
'''
. Btn: hover,
. Img: hover {
Transition: filter. 3 s;
Filter: brightness (1.1) contrast (110% );
}
'''
! [] (Http://upload-images.jianshu.io/upload_images/8373224-353b8d4f07f14df6.gif? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

! [] (Http://upload-images.jianshu.io/upload_images/8373224-337779738e33478f.gif? ImageMogr2/auto-orient/strip)

# Blur-generating image shadows
Generally, the method for generating shadows is box-shadow, filter: drop-shadow (), and text-shadow. However, using them to generate shadows can only be monochrome.
Some readers may ask, can you still generate a gradient shadow ?!

! Export paste_image.png] (http://upload-images.jianshu.io/upload_images/8373224-c4196975425efc6c.png? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

Of course not.

! Export paste_image.png] (http://upload-images.jianshu.io/upload_images/8373224-cd32750f8352bc55.png? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

This is really not feasible, but it uses filter: blur skillfully.
Blur filter, we can pretend to generate gradient or color-rich shadow effect.
Suppose we have the following picture:

! Export paste_image.png] (http://upload-images.jianshu.io/upload_images/8373224-d4698bd116437002.png? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

The following uses a filter to add a shadow effect similar to the source image color. The core CSS code is as follows:
'''
. Avator {
Position: relative;
Background: url ($ img) no-repeat center;
Background-size: 100% 100%;
'''
'''
&: After {
Content :"";
Position: absolute;
Top: 10%;
Width: 100%;
Height: 100%;
Background: inherit;
Background-size: 100% 100%;
Filter: blur (10px) brightness (80%) opacity (. 8 );
Z-index:-1;
}
}
'''
See the results:

! [] (Http://upload-images.jianshu.io/upload_images/8373224-7af75a4486f98a54.png? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

The simple principle is to use pseudo elements to generate a new image of the same size as the source image and stack it under the source image. Then, use the filter to blur the filter: blur ()
With other filters such as brightness, contrast, and transparency, you can create an illusory shadow to disguise it as the shadow of the source image.
Well, the most important thing is the filter: blur (10px) brightness (80%) opacity (. 8 );
.
CodePen Demo-filter create (web Front-end learning exchange group: 328058344 chat prohibited, do not enter !)
# Blur hybrid contrast for Fusion
This article focuses on the effect of combining the contrast filter with the fuzzy filter. Let you know what CSS black technology is!
Take out two filters separately. Their functions are as follows:
1. filter: blur (): sets the Gaussian blur effect for the image.
2. filter: contrast (): Adjust the contrast of the image.

However, when they are "fit", there is a wonderful fusion phenomenon. Through the contrast filter, the Blur edge of Gaussian Blur is eliminated, and Gaussian Blur is used to achieve the fusion effect.
Let's look at a simple example:

! Please picture _%1013102608.gif] (http://upload-images.jianshu.io/upload_images/8373224-f58712a351cb8253.gif? ImageMogr2/auto-orient/strip)

A closer look at the process of the intersection of two circles produces a boundary fusion effect when the edges are in contact with the edges.
The above results are implemented based on two points:
1. The image is animated on the canvas background where filter: contrast () is set.
2. filter: blur () is set for the animation image. The parent element of the animation image must be set to filter: contrast ()
Canvas)

It means that, behind the movement of the two circles above, a filter: contrast () is actually superimposed ()
While the two circles are set with filter: blur ()
Two conditions are indispensable.
Of course, the background color is not necessarily white. We Can slightly modify the Demo above, which is simple as follows:

! [] (Http://upload-images.jianshu.io/upload_images/8373224-ef2e140b3ac33409.png? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

Flame
Well, after the above introduction, let's take a look at some of the powerful CSS effects produced using this effect. The most amazing thing is to use the fusion effect to generate a flame, this effect was first found at Yusuke Nakaya:

! Please picture _%1013102804.gif] (http://upload-images.jianshu.io/upload_images/8373224-28d45081db917631.gif? ImageMogr2/auto-orient/strip)

You don't have to worry about your eyes. The above GIF effect is implemented using pure CSS.
The core is filter: contrast ()
And filter: blur ()
But the implementation process is also very interesting. We need to use CSS to draw a flame shape.
The core code of the flame CSS is as follows:
'''
. Fire {
Width: 0;
Height: 0;
Border-radius: 45%;
Box-sizing: border-box;
Border: 100px solid #000;
Border-bottom: 100 pxsolid transparent;
Background-color: # b5932f;
Transform: scaleX (. 4 );
Filter: blur (20px) contrast (30 );
}
'''
The length is like this:

! [P] (http://upload-images.jianshu.io/upload_images/8373224-5f0b5db61eb476ec.png? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

Decomposition Process:

! [] (Http://upload-images.jianshu.io/upload_images/8373224-d473b05ea16ea04a.png? ImageMogr2/auto-orient/strip % 7CimageView2/2/w/1240)

Put it in the black background, and the above picture is displayed.
> There will be a big question here, adding filter: blur (20px) contrast (30 );
Then, why is a red border generated in the middle of the solid color black and yellow?

> I have consulted several designers and front-end colleagues here. The answer is that the color value processing algorithms of two filters overlap at the boundary to obtain another color. (Not necessarily accurate, please kindly advise), try to restore this effect in PS, but PS does not have the contrast () filter, and the effect deviation is quite large.

OK, continue with the text. Next, we only need
Inside the div, a large number of black circles are used, starting from bottom to top, and passing through the flame irregularly. Because of the Fusion Effect of the filter, the flame effect is generated. Here, for convenience, I switch the background color to white. The flame animation principle can be understood at a Glance:

! [] (Http://upload-images.jianshu.io/upload_images/8373224-86aa5f5da6a95080.gif? ImageMogr2/auto-orient/strip)

# Text fusion Animation
In addition, we can dynamically change the filter of the element filter during the animation process: blur ()
.
Using this method, we can also design some text fusion effects:

! [] (Http://upload-images.jianshu.io/upload_images/8373224-b0725f40883e356e.gif? ImageMogr2/auto-orient/strip)

! [] (Http://upload-images.jianshu.io/upload_images/8373224-3a91b42e02821edd.gif? ImageMogr2/auto-orient/strip)

For details, refer to the following:
> CodePen Demo-word animation | word filter (https://codepen.io/Chokcoco/pen/jLjNRj)

# Important details
Although the animation is beautiful, there are still some notes in the specific use process:

1. the CSS filter can define multiple elements at the same time. For example, filter: contrast (150%) brightness (1.5)
But different filters have different effects in different order;

That is to say, use filter: contrast (150%) brightness (1.5)
And filter: brightness (1.5) contrast (150%)
The effect of processing the same image is different because the color value processing algorithm of the filter processes the image in sequence.
2. Filter animation requires a lot of computation, and the page is constantly re-painted. It is a very performance-consuming animation. Pay attention to use cases when using it. Remember to enable hardware acceleration and make rational use of the layered technology;
3. blur () Mixed contrast () filter effect. Setting different colors will produce different effects. The specific algorithm of color superposition is not very clear for the moment, A better method is to try different colors and observe the best effect;
4. CSS3 filter compatibility is not very good, but it Can be used normally on the Mobile End, more precise compatibility list, query Can I Use.