Shulou(Shulou.com)06/03 Report--

This article is about the use of CSS filter tips to share with you, the editor feels very practical, so share with you to learn, I hope you can learn something after reading this article, do not say much, follow the editor to have a look.

One of the functions we often use when dealing with pictures is a filter, which can make an image present a variety of visual effects.

In CSS, there is also a filter attribute that allows us to use CSS code to specify various filter effects for elements, such as blur, grayscale, shade, color offset, and so on.

The basic use of CSS filter is very simple. The CSS standard includes some functions that have achieved predefined effects (such as blur, brightness, contrast, etc.). We can achieve the desired effect by specifying the values of these functions:

/ * use a single filter (if the passed parameter is a percentage, you can also pass the corresponding decimal: 40%-> 0.4) * / filter: blur (5px); filter: brightness (40%); 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%) / * use multiple filters * / filter: contrast (175%) brightness (3%); / * No filters * / filter: none

Official demo:MDN

Filters are common in daily development, such as using drop-shadow to add shadows to irregular shapes, blur to achieve background blur, and ground glass effects.

Below we will further use CSS filter to achieve some animation effects to make the website interaction more cool, but also deepen the understanding of CSS filter. Let's get started!

(the animation and pseudo-class knowledge to be used below are all introduced in detail in the N coding techniques of CSS, so we will not repeat them here. Friends in need can check it out. )

Film effect

The brightness in the filter is used to adjust the shade of the image. The default value is 1; the image darkens when it is less than 1, and appears as a full black image when it is 0; and the image is brighter than the original image when it is greater than 1.

We can simulate the effect of the curtain call by adjusting the shade of the background picture and the transparency of the text.

If there's anything in life that makes you happy, do it.

Never mind what other people say.

.pic {height: 100%; width: 100%; position: absolute; background: url ('. / images/movie.webp') no-repeat; background-size: cover; animation: fade-away 2.5s linear forwards; / / forwards when the animation is completed, keep the state of the last frame} .text {position: absolute; line-height: 55px; color: # fff; font-size: 36px; text-align: center Left: 50%; top: 50%; transform: translate (- 50% brightness 50%); opacity: 0; animation: show 2s cubic-bezier (.74 filter: brightness (1);} 100% {filter: brightness (0) } @ keyframes show {/ / Transparency of text Animation 20% {opacity: 0;} 100% {opacity: 1;}} blur effect

In the following word card, when the mouse hover over a card, the background of the other cards is blurred, making the user focus on the current card.

Html structure:

Flower

The flowers mingle to form a blaze of color.

Sunset

The sunset glow tinted the sky red.

Plain

The winds came from the north, across the plains, funnelling down the valley.

The way to do this is to add the background to the pseudo-class of the .card element, and filter the pseudo-class of the element when the element is not in focus.

Card: before {z-index:-1; content:'; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 20px; filter: blur (0px) opacity (1); transition: filter 200ms linear, transform 200ms linear;} / * you can't add a filter directly to the .card element, but the background and filter are added to the pseudo class. Because the parent element adds a filter, its child elements will be changed by the filter together. If the filter is added directly to the .card element, the above text will also be blurred. * / / select the non-hover .card element through the css selector and add a filter of blur, transparency and shade to its pseudo-class. Cards: hover > .card: not (: hover): before {filter: blur (5px) opacity (0.8) brightness;} / / for hover elements, the pseudo-class enhances saturation and enlarges. Card: hover:before {filter: saturate (1.2); transform: scale (1.05) } fade effect

The fading effect can create a nostalgic style. In the following set of photo walls, we convert the image tone to dark brown through the sepia filter, and then simulate the effect of old photos by reducing saturation saturate and hue rotation hue-rotate fine-tuning.

.pic {border: 3px solid # fff; box-shadow: 0 10px 50px # 5f2f1182; filter: sepia (30) saturate (40) hue-rotate (5deg); transition: transform 1s;} .pic: hover {filter: none; transform: scale (1.2) translateX (10px); z-index: 1;} grayscale effect

How to make the website gray? Add filter: grayscale (100%) to the html element.

The grayscale (amount) function changes the grayscale of the input image. The value of amount defines the scale of grayscale conversion. A value of 100% completely converts to a grayscale image, while a value of 0% does not change the image. If no value is set, the default value is 0.

Fusion effect

For two intersecting elements to have the following blending effect, the filters you need are blur and contrast.

.container {margin: 50px auto; height: 140px; width: 400px; background: # fff; / / set the background color for the parent element of the fusion element display: flex; align-items: center; justify-content: center; filter: contrast (30); / / set contrast} .fusion {border-radius: 50% for the parent element of the fusion element; position: absolute; filter: blur (10px) / / set blur} .fusion-1 {height: 90px; width: 90px; background: # 03a9f4; transform: translate (- 50px); animation: 2s moving linear infinite alternate-reverse;}. Circle-2 {height: 60px; width: 60px; background: # 0000ff; transform: translate (50px); animation: 2s moving linear infinite alternate } @ keyframes moving {/ / 0% movement of two elements {transform: translate (50px)} 100% {transform: translate (- 50px)}}

Technical points to achieve fusion effect:

The contrast filter is applied to the parent element (.container) of the fusion element, and the parent element must have background set.

The blur filter is applied to the fusion element (.blend).

Blur sets the blur of the image, and contrast sets the contrast of the image. When the two are combined like the above, they produce a magical fusion effect, and you can use this as if you were using a formula.

On the basis of this fusion effect, we can do some interesting interaction design.

Load the animation:

Html and css are shown below, this animation is mainly achieved by controlling the size and displacement of the child element, but because both the parent element and the child element satisfy the "fusion formula", the fusion effect occurs when the child elements intersect.

.container {margin: 10px auto; height: 140px; width: 300px; background: # fff; / / parent element setting background color display: flex; align-items: center; filter: contrast (30); / / parent element setting contrast} .parent {height: 50px; width: 60px; background: # 1aa7ff; border-radius: 50%; position: absolute; filter: blur (20px); / / child element setting blur transform: scale (0.1) Transform-origin: left top;} .circle:nth-child {animation: move 4s cubic-bezier (.44Power.79Power.83j.96) infinite;}. Circle:nth-child (2) {animation-delay: .4s;} .circle:nth-child (3) {animation-delay: .8s;} .circle:nth-child (4) {animation-delay: 1.2s;} .circle:nth-child (5) {animation-delay: 1.6s } @ keyframes move {/ / displacement and size animation of child elements 0 {transform: translateX (10px) scale (0.3);} 45% {transform: translateX (135px) scale (0.8);} 85% {transform: translateX (270px) scale (0.1);}

Cool way of writing:

Mainly by constantly changing the values of letter-spacing and blur to make the text from fusion to separation:

Fantastic.container {margin-top: 50px; text-align: center; background-color: # 000; filter: contrast (30);} .text {font-size: 100px; font-family: 'Gill Sans',' Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; letter-spacing:-40px; color: # fff; animation: move-letter 4s linear forwards / / forwards when the animation is complete, keep the state of the last frame} @ keyframes move-letter {0% {opacity: 0; letter-spacing:-40px; filter: blur (10px);} 25% {opacity: 1;} 50% {filter: blur (5px);} 100% {letter-spacing: 20px; filter: blur (2px);}} water wave effect

Filter can also be linked to the SVG filter element, the SVG filter element MDN, through URL.

The following water ripple effect is based on SVG feTurbulence filter, the principle of reference to talk about SVG feTurbulence filter and SVG feTurbulence filter in-depth introduction, interested friends can read in depth.

The feTurbulence filter simulates the random pattern of real things in nature with the help of Perlin noise algorithm. It receives the following five properties:

BaseFrequency represents the basic frequency parameters of noise. The higher the frequency is, the denser the noise is.

NumOctaves represents the number of frequency doubling, the more the number of frequency doubling, the more natural the noise looks.

The seed attribute represents the starting value of pseudorandom number generation in the feTurbulence filter effect. Different numbers of seed do not change the frequency and density of the noise, but the shape and position of the noise.

StitchTiles defines the behavior of Perlin noise at the border.

The type attribute values are fractalNoise and turbulence, and turbulence is used to simulate random styles.

In this example, two img tags use the same image, and the second img tag uses scaleY (- 1) to flip the vertical image to simulate the reflection.

In addition, the feTurbulence filter is used for the reflection image, and the effect of water pattern fluctuation is realized by constantly changing the baseFrequence value of the feTurbulence filter through animation.

.container {height: 520px; width: 400px; display: flex; clip-path: inset (10px); flex-direction: column;} img {height: 50%; width: 100%;} .reflect {transform: translateY (- 2px) scaleY (- 1); / / a pair of simulated reflection elements apply the id filter: url (# displacement-wave-filter);} dithering effect of the svg filter above in svg filter / / url

What is changed in the above water wave animation is the baseFrequence value, and we also achieve the jitter effect of the text by changing the value of seed.

Such a joyful night!

.shaky {font-size: 60px; filter: url (# displacement-text-filter); / / url corresponds to the id of svg filter above. These are the tips used by CSS filter. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.