CSS3 in the filter (filter) properties used in detail

Time:2021-6-13

Recently, when I was modifying the intranet portal, I happened to meet the need to use the filter; Two pictures were used at the beginning; Mouse over the background into a gradient; Icon switching; However, after the background icon is configured; Causes the mouse to slide over the icon not to be able to switch normally; So I think of the filter effect to deal with. So by the way, I learned the commonly used filter effect.

Use the filter:

preface

The filter property of CSS3 can be used to process images in web pages similar to Photoshop Image processing.

Browser support: only IE browser does not support the filter attribute. In order to be compatible with lower versions of Safari and Google browsers, it is necessary to add the prefix – WebKit -.

Common attributes

Usage syntax:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

CSS filters can define multiple elements for the same element at the same time, such as filter: contrast (150%) brightness (1.5), but the effect is different due to different filter sequence;

The default value is: initial

Inherit means to inherit from the parent.

Note: filter usually uses percentage (e.g. 75%), of course, it can also use decimal (e.g. 0.75).

Normal normal

No filter added


<div data-filter="image-normal">
 <h2>normal</h2>
 <img src="1.jpg">
</div>

Grayscale

Convert the image to grayscale image. Value defines the scale of the transformation. When the value is 100%, the image is completely transformed into gray image, and when the value is 0%, the image has no change. If it is not set, the default value is 0. You can also write decimals between 0 and 1.

<div data-filter="image-grayscale">
 <h2>grayscale</h2>
 <img src="1.jpg">
</div>


//If the value is a decimal between 0 and 1, grayscale (0) is the original image; Grayscale (1) is completely gray;
[data-filter=image-grayscale] img {
  filter: grayscale(50%);
  -webkit-filter:grayscale(50%);  /* Chrome, Safari, Opera */
}

Saturation

When the value is 0, black and white is displayed; when the value is 0.5, the saturation is half of the original image; when the value is 1, the saturation is equal to the original image; when the value is greater than 1, the saturation is enhanced.

//(the value is a decimal between 0 and 1)
<div data-filter="image-saturate">
 <h2>saturate</h2>
 <img src="1.jpg">
</div>

Saturation pair is the definition of color concentration (purity). The degree and level of brightness of the color in the saturation picture;


[data-filter=image-saturate] img {
  filter: saturate(360%);
  -webkit-filter:saturate(360%); /* Chrome, Safari, Opera */
}

Sepia Tan

0 means that the brown degree is 0%, showing the original image, 1 means that the brown degree is 100%, showing brown.


<div data-filter="image-sepia">
 <h2>sepia</h2>
 <img src="1.jpg">
</div>

[data-filter=image-sepia] img {
  filter: sepia(100%);
  -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
}

Invert reverse

Inverts the input image. Value defines the scale of the transformation. 100% of the value is a complete reversal. When the value is 0%, the image has no change. A value between 0% and 100% is a linear multiplier of the effect. If the value is not set, the default value is 0.


<div data-filter="image-invert">
 <h2>invert</h2>
 <img src="1.jpg">
</div>

[data-filter=image-invert] img {
  filter: invert(100%);
  -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
}

Transparency

The transparency of the image. A value of 0% is completely transparent, and a value of 100% is unchanged. 0-100% is partially transparent. You can also replace% with a decimal between 0 and 1. Similar to the existing opacity attribute, the difference is that some browsers will provide hardware acceleration in order to improve performance through filter.


<div data-filter="image-opacity">
 <h2>opacity</h2>
 <img src="1.jpg">
</div>

[data-filter=image-opacity] img {
  filter: opacity(50%);
  -webkit-filter: opacity(50%); /* Chrome, Safari, Opera */
}

Brightness

Make the picture brighter or darker. If the value is 0%, the image will be completely black. If the value is 100%, there is no change in the image. If the value exceeds 100%, the image will be brighter than before. If there is no set value, the default is 1. You can use percentages or decimals.


<div data-filter="image-brightness">
 <h2>brightness</h2>
 <img src="1.jpg">
</div>

[data-filter=image-brightness] img {
  filter: brightness(120%);
  -webkit-filter: brightness(120%); /* Chrome, Safari, Opera */
}

Contrast

Adjust the contrast of the image. If the value is 0%, the image will be completely black. The value is 100%, and the image remains unchanged. A value of more than 100% means that a lower contrast is used. If no value is set, the default value is 1. You can use percentages or decimals. Contrast is the definition of the brightness of the picture. Contrast refers to the level of black and white light and shade.


<div data-filter="image-contrast">
 <h2>contrast</h2>
 <img src="1.jpg">
</div>

[data-filter=image-contrast] img {
  filter: contrast(160%);
  -webkit-filter: contrast(160%); /* Chrome, Safari, Opera */
}

Hue rotate

Apply hue rotation to the image. Let the color in the image do the corresponding rotation in the hue ring. When the value is 0 DEG, the image has no change. If the value is not set, the default value is 0DEG. Although there is no maximum value for this value, a value over 360 DEG is equivalent to another circle.


<div data-filter="image-hue-rotate">
 <h2>hue-rotate</h2>
 <img src="1.jpg">
</div>

[data-filter=image-hue-rotate] img {
  filter: hue-rotate(160deg);
  -webkit-filter: hue-rotate(160deg); /* Chrome, Safari, Opera */
}

Blur

Set Gaussian blur to the image. The larger the value is, the more fuzzy it is. The default value is 0, which means it is not fuzzy.


<div data-filter="image-blur">
 <h2>blur</h2>
 <img src="1.jpg">
</div>


[data-filter=image-blur] img {
  filter: blur(2px);
  -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
}

Drop shadow

Andbox-shadowThe attributes are very similar; The difference is that through the filter, some browsers will provide hardware acceleration for better performance.


<div data-filter="drop-shadow">
 <h2>blur</h2>
 <img src="1.jpg">
</div>

[data-filter=drop-shadow] img {
  filter: drop-shadow(16px 16px 20px blue);
  -webkit-filter: drop-shadow(16px 16px 20px blue); /* Chrome, Safari, Opera */
}

Compare box shadow

Add a shadow attribute.

<div data-filter="box-shadow">
 <h2>blur</h2>
 <img src="1.jpg">
</div>

/*Add shadow effect*/
[data-filter=box-shadow] img {
  box-shadow:16px 16px 20px blue;
  -webkit-filter:box-shadow:16px 16px 20px blue; /* Chrome, Safari, Opera */
}

There are differences between box shadow and drop shadow; In effect, box shadow shadows the whole picture, while drop shadow only shadows the opaque part.

Multiple filter effect

<div data-filter="multiple-filter">
 <h2>blur</h2>
 <img src="1.jpg">
</div>

/*Adjust the brightness and contrast of buttons and pictures*/
[data-filter=multiple-filter] img {
   filter: contrast(175%) brightness(3%);
   -webkit-filter: contrast(175%) brightness(3%);/* Chrome, Safari, Opera */
}

Fusion effect

/*Blur mixed with contrast to produce fusion effect*/
.filter-mix {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 200px;
    filter: contrast(20);
    background: #fff;
}
.filter-mix::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #333;
    top: 40px;
    left: 40px;
    z-index: 2;
    filter: blur(6px);
    box-sizing: border-box;
    animation: filterBallMove 4s ease-out infinite;
}

.filter-mix::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #3F51B5;
    top: 60px;
    right: 40px;
    z-index: 2;
    filter: blur(6px);
    animation: filterBallMove2 4s ease-out infinite;
}

@keyframes filterBallMove {
    50% {
        left: 140px;
    }
}

@keyframes filterBallMove2 {
    50% {
        right: 140px;
    }
}

Flame effect

Filter: contrast() works with filter: blur() and animation to produce flame effect.


filter: blur(20px) contrast(30);

animation: move 2s infinite 0.2s linear;

SCSS filter style

$filters: (
 Grayscale: '(50%)' // gray scale
 Saturate: '(360%)' // saturation
 Sepia: '(100%)' // Tan
 Invert: '(100%)' // invert
 Opacity: '(50%)' // transparency
 Brightness: '(120%)' // brightness
 Contrast: '(160%)', // contrast
 Hue rotate: '(160deg)' // hue rotation
 Blur: '(2px)', // fuzzy  
 Drop shadow: 'drop shadow (16px 16px 20px blue)', // shadow
);

@each $type, $value in $filters {
 [data-filter="image-#{$type}"] {
  img {
       filter: #{$type}#{$value};
  }
 }
}

summary

So far, this article about the use of CSS3 filter attribute in detail is introduced here. For more relevant CSS3 filter content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!