Detailed explanation of the use of filter properties in CSS3

Recently, when I was modifying the intranet portal, I happened to encounter a place where I needed to use filters. At first, I used two pictures. When the mouse moved over the background, it became a gradient and the icons switched. However, after the icons were configured in the background, the icons could not switch normally when the mouse moved over them. So I thought of using the filter effect to deal with it. So I also learned some commonly used filter effects.

Use filters:

Preface

The filter property of css3 can process images on web pages in a similar way to Photoshop.

Browser support: Only IE browser does not support the filter attribute. In order to be compatible with lower versions of Safari and Google browser, the prefix -webkit- needs to be added.

Common properties

Use syntax:

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

CSS filters can define multiple filters for the same element at the same time, such as filter: contrast(150%) brightness(1.5) , but the effects produced by applying the filters in different orders are also different;

The default value is: initial

inherit means inherit from the parent.

Note: Filters are usually expressed as percentages (such as 75%), but can also be expressed as decimals (such as 0.75).

normal

No filter added

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

grayscale

Convert the image to grayscale. The value defines the scale of the conversion. A value of 100% converts the image completely to grayscale, and a value of 0% leaves the image unchanged. If not set, the value defaults to 0. You can also write decimals between 0 and 1.

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


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

saturate

When the value is 0, it displays in black and white. When the value is 0.5, the saturation is half of the original image. When the value is 1, it means that the saturation is equal to the original image. A value greater than 1 means that the saturation is enhanced.

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

Saturation is the definition of the concentration (purity) of a color. Saturation: The vividness and depth of colors in the picture;

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

sepia tan

0 means the brown degree is 0%, showing the original image, and 1 means 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

Invert the input image. The value defines the scale of the conversion. A value of 100% is a complete reversal. A value of 0% results in no change to the image. Values ​​between 0% and 100% are linear multipliers of the effect. If the value is not set, it defaults to 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 */
}

opacity

The degree of transparency of the image. A value of 0% is completely transparent, and a value of 100% leaves the image unchanged. 0-100% is partially transparent. You can also use a decimal between 0 and 1 instead of %. This is very similar to the existing opacity property, except that some browsers provide hardware acceleration through filters to improve performance.

<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 lighter or darker. If the value is 0%, the image will be completely black. A value of 100% results in no change to the image. Values ​​over 100% make the image brighter than before. If no value is set, the default is 1. You can use either 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

Adjusts the contrast of the image. A value of 0% will make the image completely black. At a value of 100%, the image remains unchanged. Values ​​over 100% mean a lower contrast will be used. If no value is set, the default is 1. You can use either percentages or decimals. Contrast is the definition of the degree of lightness and darkness in an image. Contrast refers to the level of light and dark in the picture.

<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 hue rotation

Applies a hue rotation to the image. Let the colors in the image rotate accordingly in the color wheel. If the value is 0deg, the image will not change. If the value is not set, the default value is 0deg. Although there is no maximum value for this value, a value exceeding 360 degrees is equivalent to going around again.

<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

Apply a Gaussian blur to the image. The larger the value, the more blurry it is. The default value is 0, which means no blur.

<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

Very similar to box-shadow property; the difference is that, with filters, some browsers may 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 */
}

Comparison with box-shadow

Add shadow properties.

<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 is a difference between box-shadow and drop-shadow; in terms of effect, box-shadow shadows the entire image, while drop-shadow only shadows the opaque part.

multiple filter effects

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

/*Adjust the brightness and contrast of buttons and images*/
[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 a 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;
    }
}

Fire Effect

Filter: contrast() is used in conjunction with filter: blur() and animation to create the flame effect.

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

animation: move 2s infinite 0.2s linear;

scss filter style

$filters: (
 grayscale: '(50%)', // grayscale saturate: '(360%)', // saturation sepia: '(100%)', // sepia invert: '(100%)', // opacity: '(50%)', // brightness: '(120%)', // contrast: '(160%)', // hue-rotate: '(160deg)', // blur: '(2px)', // drop-shadow: 'drop-shadow(16px 16px 20px blue)', // shadow);

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

Summarize

This is the end of this article about the detailed use of filter properties in CSS3. For more relevant CSS3 filter content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!