preface

“When we think about manipulating images, we often think of image manipulation tools like PhotoShop. As front-end developers, we often have to deal with special effects, such as making ICONS show different colors depending on their state. Or hover, the contrast of the picture, shadow processing.”

You think these are processed by Photoshop? No, no, no, it’s pure CSS, it’s amazing.

Powerful CSS: filter

CSS filters are used to provide graphical effects, such as blurring, sharpening or element discoloration. Filters are usually used to adjust images, backgrounds and borders for rendering. MDN

The CSS standard contains functions that implement predefined effects.

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); <! - HTML - > < img SRC = "https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" Alt = "original" >Copy the code

filter: none

There is no effect, and the default filter is None

Filter :blur() Gaussian blur

Give the image a Gaussian blur effect, the larger the length value, the more blurred the image

Let’s try it out

img {
    filter:blur(2px);;
}
Copy the code

Brightness (%) Linear multiplication

You can make the picture look brighter or darker

img {
    filter:brightness(70%);
}
Copy the code

Contrast (%) contrast

Adjust the contrast of the image.

img {
    filter:contrast(50%);
}
Copy the code

drop-shadow(h-shadow v-shadow blur spread color)

Set a shadow effect on the image. A shadow is an offset version of a mask that can be drawn in a particular color and can have a degree of blurring underneath the image. Functions accept values of type (defined in CSS3 context), except that the “inset” keyword is not allowed. This function is similar to the existing box-shadow box-shadow property; The difference is that with filters, some browsers offer hardware acceleration for better performance

Using this scheme, we actually change the color of some ICONS, such as a black icon to a blue icon.

PNG format CSS arbitrary color rendering technology

img {
    filter: drop-shadow(705px 0 0 #ccc);
}
Copy the code

Here, we project the image into a gray area of equal size.

Hue -rotate(deg) Hue rotation

img {
    filter:hue-rotate(70deg);
}
Copy the code

Look, my little sister turned into an avatar!

Invert (%) inversion

This function reverses the input image, somewhat like an exposure

img {
    filter:invert(100%)
}
Copy the code

Grayscale (%) converts the image to grayscale

This effect can make the picture old, there is a sense of changing times. Antique fans will love this effect

img {
    filter:grayscale(80%);
}
Copy the code

In addition to archaic, there are times when you need to turn the site gray, such as on Holocaust Memorial Day.

I can set it like this

*{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
Copy the code

Sepia (%) converts the image to dark brown

Here’s a warm color for my little sister.

img {
    filter:sepia(50%)
}
Copy the code

Notice that I didn’t put the URL () method up here

That’s right, because I want to leave it at the end, filter: URL () is the ultimate way CSS filters change images. CSS: Filter can import an SVG filter as its own filter.

The ultimate color-changing solution! filter:url();

Let me explain why filter: URL () is the ultimate solution to image discoloration.

Let’s take a look at how PHOTOSHOP works. We all know that web pages have three primary colors: R(red), G(green), and B(blue). The common RGBA also includes an Opicity value, and the opCity value is calculated based on the alpha channel. In other words, every pixel we see on a web page is made up of four channels: red, blue, green and alpha. Each channel is called a color palette. SVG research Path (11) – filter:feColorMatrix

Wouldn’t it be perfect if we could change the value of each channel to get any color we want? In principle, we could use an SVG filter like PHOTOSHOP to get any image we want, not just color change. We can even generate an image out of thin air.

SVG feColorMatrix is a good method

<svg height="0" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="change"> <feColorMatrix type="matrix" values=" 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> </ SVG > <img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt=""> img { filter:url(#change);  }Copy the code

With a single channel we can turn the image into a single color

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="change">
               <feColorMatrix values="3 -1 -1 0 0
                       -1 3 -1 0 0
                       -1 -1 3 0 0
                       0 0 0 1 0" />
        </filter>
    </defs>
</svg>
Copy the code

We can get some really cool PHOTOSHOP effects through the dual channel

Of course, here, just as an example, by configuring the values in the matrix, we can configure the values of each pixel to be displayed according to the rules we define

Let’s talk about the calculation method of feColorMatrix matrix in detail here

The Rin Gi

N Bin A (alpha) is the RGBA value of each pixel in the original image

Through matrix calculation, the resulting Rout Gout Bout Aout is the final RGBA value displayed.

Take brown rgba(140,59,0,1) as an example

Based on the formula above, we can simplify some calculations by setting the value of only one channel in the same row and 0 for the other channels

It’s not hard to figure out the matrix

0 0 0 0 target value R 0 0 0 0 0 0 target value G 0 0 0 0 0 target value B 0 0 0 0 0 1Copy the code

According to the rule, you just need to calculate 255/ the color you want to display for the channel = target value

The brown rGBA we want (140,59,0,1) converts to the color pad RGBA of 140,59,0 255

You can figure out what your target value is

0 0 0 0 0.55 0 0 0 0 0.23 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1Copy the code

Multi – channel set up a cool effect

Just like the cool image of the double channel we saw earlier

Today we are going to saturate the image. How do we do that? The first thing to think about, of course, is what causes saturation, which is that the redder the red, the bluer the blue, and the greener the green, and from that, our matrix looks like this, and when you see a matrix with a 3 and a -1 in it, it’s going to be very boring, and it’s pretty easy to understand how it works, Let’s assume that the RGB of a pixel is (200/255),(100/255), and (50/255) respectively, and the color presented should be somewhat dark orange. After matrix conversion, R becomes 200/255×3-100/255-50/255= 1.76, G becomes 200/255x(-1)+100/255*3-50/255=0.2, B becomes 200x(-1)+100x(-1)+50×3=-0.59, So RGB conversion is: 200×1.76,100×0.2,50x-0.5. SVG Research Path (11) – Filter :feColorMatrix

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="change">
               <feColorMatrix values="3 -1 -1 0 0
                       -1 3 -1 0 0
                       -1 -1 3 0 0
                       0 0 0 1 0" />
        </filter>
    </defs>
</svg>
Copy the code

Other options

In addition to feColorMatrix SVG filters, there are many ways to define filters that can also be applied to images. I won’t go into detail here because of space limitations

conclusion

  • Css3 provides the filter attribute, which makes it possible to achieve more cool effects through the front-end technology
  • Depending on SVG filters, we can achieve complex filter effects

Pay attention to

  • CSS: Filter is not the same as the filter in Ie
  • CSS: Filter supports different browsers. Therefore, pay attention to the compatibility of browsers when using CSS: Filter

reference

  • SVG Research Path (11) – Filter :feColorMatrix
  • css:filter MDN
  • Color Filters Can Turn Your Gray Skies Blue
  • PNG format CSS arbitrary color rendering technology

Write in the last

Codepen. IO /nanhupatar/… Welcome to view

The article will inevitably have omissions, I hope you can point out the criticism

Amway’s own wechat public account: Front End Guide