filter - commonly used filter effects (frosted glass, picture shadow, picture fade)

filter attribute

The filter attribute is the filter attribute.
Format:filter: <filter-function>;

What are filters?
Filter: Convert the pixels in the element into new pixels after calculation through some algorithms.

It also has a sibling attribute: drop-filter
the difference is that filter means that the pixels of this element are involved in the calculation, and drop-filter means that the elements covered under this element are involved in the calculation.

filter algorithm function

What kind of algorithm function there is, there is what kind of filter effect. And filter functions can not only be used alone, but also in combination.
Pixel a -> Algorithm 1 -> Algorithm 2 -> Pixel b

blur: Gaussian blur

• blur(10px)

blur is a Gaussian blur function, and the algorithm is to calculate the color of the current pixel by referring to the colors of surrounding pixels. 10px represents the range radius of the reference. The larger the reference range, the blurr it will naturally be, so the larger the value in blur() is, the blurr the picture will be.

hue-rotate: hue circle

• hue-rotate(45deg)

It can adjust the hue of pixels. The angle in the function is the corresponding color on the hue circle.

contrast: contrast

• contrast(1.5)

The default value is 1. The smaller the value, the smaller the color contrast.

grayscale: grayscale

• grayscale(1)

The default value is 0. When the value is 1, the web page becomes black and white. Anniversaries are commonly used.

drop-shadow: picture shadow

• drop-shadow(10px, 10px, 10px, ragb(0,0,0,0.5);

This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind the entire box of the element, while the drop-shadow() filter creates a shadow that conforms to the shape of the image itself (alpha channel).

Common filter effects

Image content outline shadow

Note: The images generally used for this effect are png images with transparent backgrounds.
Because this will reflect the shadow along the outline of the image content. If it is opaque, the image content is a rectangle, and the effect looks the same as box-shadow, which generates a rectangular shadow.

.img-drop-shadow {
    
    
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}
.img-box-shadow {
    
    
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

frosted glass

.ground-glass {
    
    
  height: 260px;
  width: 400px;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.4);
  border-left: 1px solid hsla(0, 0%, 100%, 0.4);
  border-radius: 20px;
  box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 20px hsla(0, 0%, 100%, 0.1);
  background-image: linear-gradient(to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8));
  color: hsla(0, 0%, 100%, 0.8);
  backdrop-filter: blur(6px);
  z-index: 10;
}

Picture black and white

.img-gray {
    
    
    filter: grayscale(1) drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

Adjust image hue and contrast

.img-color--change {
    
    
  filter: contrast(1.2) hue-rotate(274deg) drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

Make elements or text rounded

Take text as an example.

practice:

1. First blur the text.
2. Set the background color and filter in the parent element, and increase the contrast.
   1. filter: contrast(); and background-color must be displayed together in the parent element, and the level of the parent element is not limited.

Principle:
After the text is blurred, the parent element increases the contrast. The effect of increasing the contrast is to make the text clearer. But the text itself is already blurry. Therefore, for the edges of text, the browser will automatically blend the text color and background color. The overall effect is that the text becomes rounded.

.text-card {
    
    
    display: flex;
    justify-content: space-evenly;
    font-size: 60px;
    font-weight: 700;
}
.text-card--soft {
    
    
    background-color: #ffffff;
    filter: contrast(15);
}
.text--soft {
    
    
    color: red;
    filter: blur(5px);
}

<div class="text-card">
    <h1 class="text">ikun</h1>
    <div class="text-card--soft">
        <h1 class="text--soft">ikun</h1>
    </div>
</div>