Recently, when I was modifying the Intranet portal, I happened to encounter a place where I needed to use filters. I started with two images; Mouse over the background into a gradient; Icon switch; But after configuring the icon in the background; The mouse cannot switch over the icon. So I thought of the effect of the filter to deal with. So the way to learn about the common effect of the filter.

Use filters:

preface

Css3 filter attribute, can be similar to the effect of Photoshop image processing in the web page, through THE CSS image processing.

Browser support: Only Internet Explorer does not support the filter attribute. In order to be compatible with earlier versions of Safari and Google Browsers, the prefix -webkit- is required.

Commonly used attributes

Use grammar:

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

You can have multiple filters for the same element at the same time. For example, Filter: Brightness (150%) Brightness (1.5), but the order of the filters is different.

The default value is initial

Inherit indicates inherit from the parent.

Note: Filters usually use percentages (e.g. 75%), but can also be expressed as decimals (e.g. 0.75).

Normal normal

No filter was added

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

Grayscale gray-scale

Convert the image to grayscale image. Value defines the scale of the conversion. If the value is 100%, the image will be converted to gray scale completely, and if the value is 0%, the image will have no change. If this parameter 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>

Copy the code
Grayscale (0); // Grayscale (0); Grayscale (1) turns completely gray; [data-filter=image-grayscale] img { filter: grayscale(50%); - its - filter: grayscale (50%); /* Chrome, Safari, Opera */ }Copy the code

Saturate the saturation

When the value is 0, it shows black and white; 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.

// (values between 0 and 1)<div data-filter="image-saturate">
	<h2>saturate</h2>
	<img src="1.jpg">
</div>
Copy the code
The saturation pair is the definition of the concentration (purity) of a color. The vividness and level of color in a picture; saturation. [data-filter=image-saturate] img { filter: saturate(360%); - its - filter: saturate (360%); /* Chrome, Safari, Opera */ }Copy the code

Sepia brown

0 indicates that the brownish degree is 0% and the original picture is displayed. 1 indicates that the brownish degree is 100% and the original picture is displayed.

<div data-filter="image-sepia">
	<h2>sepia</h2>
	<img src="1.jpg">
</div>
Copy the code
[data-filter=image-sepia] img {
  filter: sepia(100%).-webkit-filter: sepia(100%)./* Chrome, Safari, Opera */
}

Copy the code

Invert the color

Invert the input image. Value defines the scale of the conversion. 100% value is completely reversed. If the value is 0%, the image has no change. Values between 0% and 100% are linear multipliers 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>
Copy the code
[data-filter=image-invert] img {
  filter: invert(100%).-webkit-filter: invert(100%)./* Chrome, Safari, Opera */
}

Copy the code

Opacity transparency

The transparency of the image. A value of 0% indicates complete transparency, while a value of 100% indicates no change in the image. It is partially transparent between 0 and 100%. You can also replace % with a decimal between 0 and 1. The opacity property is similar to the existing one, except that some browsers provide hardware acceleration to improve performance through filter.

<div data-filter="image-opacity">
	<h2>opacity</h2>
	<img src="1.jpg">
</div>
Copy the code
[data-filter=image-opacity] img {
  filter: opacity(50%).-webkit-filter: opacity(50%)./* Chrome, Safari, Opera */
}

Copy the code

Brightness brightness

Make the picture brighter or darker. If the value is 0%, the image will be completely black. If the value is 100%, the image does not change. Value over 100%, the image will be brighter than the original. If no value is set, the default is 1. You can use percentages or decimals.

<div data-filter="image-brightness">
	<h2>brightness</h2>
	<img src="1.jpg">
</div>
Copy the code
[data-filter=image-brightness] img {
  filter: brightness(120%).-webkit-filter: brightness(120%)./* Chrome, Safari, Opera */
}

Copy the code

Contrast contrast

Adjust the contrast of the image. If it’s 0 percent, it’s going to go completely black. The value is 100%. The graph stays the same. A value of more than 100% means lower comparisons will be applied. If no value is set, the default value is 1. You can use percentages or decimals. Contrast is the definition of how light and dark a picture is. Contrast is the level of black and white light and shade in a picture.

<div data-filter="image-contrast">
	<h2>contrast</h2>
	<img src="1.jpg">
</div>
Copy the code
[data-filter=image-contrast] img {
  filter: contrast(160%).-webkit-filter: contrast(160%)./* Chrome, Safari, Opera */
}

Copy the code

Hue -rotate Indicates hue rotation

Apply hue rotation to the image. Make the color in the image rotate in the hue ring. If the value is 0deg, the image has no change. If the value is not set, the default value is 0deg. While there is no maximum value, anything above 360deg is like going around again.

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

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

Copy the code

The blur blur

Apply gaussian blur to the image. The larger the value, the more blurry it is. The default is 0, which means it is not blurry.

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

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

Copy the code

The drop shadow shadow

Similar to the box-shadow property; The difference is that with filters, some browsers offer hardware acceleration for better performance.

<div data-filter="drop-shadow">
	<h2>blur</h2>
	<img src="1.jpg">
</div>
Copy the code
[data-filter=drop-shadow] img {
  filter: drop-shadow(16px 16px 20px blue);
  -webkit-filter: drop-shadow(16px 16px 20px blue); /* Chrome, Safari, Opera */
}
Copy the code

Compare the box – shadow

Add a shadow attribute.

<div data-filter="box-shadow">
	<h2>blur</h2>
	<img src="1.jpg">
</div>
Copy the code
/* 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 */
}
Copy the code

There is a difference between box-shadow and drop-shadow; In effect, box-shadow shadows the entire image, while drop-shadow shadows only opaque parts.

Multiple filter effects

<div data-filter="multiple-filter">
	<h2>blur</h2>
	<img src="1.jpg">
</div>
Copy the code
/* 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 */
}
Copy the code

The fusion results

/* contrast */
.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; }}Copy the code

Flame effect

Filter: blur() works with filter: blur() and animation to create the flame effect.

filter: blur(20px) contrast(30);
Copy the code
animation: move 2s infinite 0.2s linear;
Copy the code

SCSS filter style

$filters: (
	grayscale: '(50%)., / / gray-scale saturate:'(360%).,// Saturation sepia:'(100%).// Invert:'(100%)., / / the color opacity:'(50%).// Brightness:'(120%)., / / brightness contrast:'(160%).,// Contrast hue-rotate:'(160deg)', // 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}; }}}Copy the code

Reference article:

  1. www.cnblogs.com/coco1s/p/75…
  2. www.runoob.com/cssref/css3…
  3. Segmentfault.com/a/119000001…
  4. www.sohu.com/a/120823635…
  5. Blog.csdn.net/weixin_4270…
  6. www.freejs.net/demo/392/in…

If this article helps you, please like it and follow it, search for “Call me Jayne hide and Hide” and join our technology group to learn and discuss and explore the frontier together.