CSS3 practical development: Using CSS3 to achieve the filtering effect of photoshop_html/css

CSS3 practical development: Using CSS3 to achieve the filtering effect of photoshop_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:59:29

Original

1375 people have browsed it

We know that it is a very common function to use Photoshop to adjust the brightness and contrast of images, or convert pictures to grayscale, etc. Today I will introduce to you a few new features, we use CSS to add the same effect to web images.

First we display an image on the web page, the html code is as follows:

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="styles.css" media="screen"><title>CSS3实战开发:使用CSS3实现photoshop的过滤效果</title></head><body><img src="20140821.jpg"  width="800" /></body></html>

Copy after login

The running effect is as follows:

Now I will introduce the corresponding features to you, and at the same time show you the renderings after applying the image filtering style.

1. Adjust the grayscale of the image: grayscale, the range is 0%-100%. The application style code is as follows:

img {       -webkit-filter: grayscale(100%);  }

Copy after login

The page effect at this time is:

2. Apply depth to the image Brown effect: sepia, the range is 0-100%. The syntax code is as follows:

img {       -webkit-filter: sepia(100%);  }

Copy after login

The effect of running the page at this time:

3. Adjust the image exposure: brightness, range 0%-100%, the syntax code is as follows:

img {      -webkit-filter: brightness(40%);   }

Copy after login

Run the page, the effect is as follows:

4. Adjust image contrast: contrast, the syntax code is as follows:

img {      -webkit-filter: contrast(500%);   }

Copy after login

The page effect is as follows:

Finally, I will introduce you to a blur effect: blur. The syntax code is as follows:

img {      -webkit-filter: blur(2px);   }

Copy after login

The page effect at this time As follows:

Of course, the above features can be used at the same time. For example, when the mouse moves over the image, the image becomes gray and the image is blurred, the code is as follows:

img:hover {      -webkit-filter:grayscale(100%) blur(2px);   }

Copy after login

The page effect at this time is:

It was originally done using CSS features Photoshop's filter function is so simple.