Home > Article > Web Front-end > CSS3 practical development: Using CSS3 to achieve the filtering effect of photoshop_html/css_WEB-ITnose
CSS3 practical development: Using CSS3 to achieve the filtering effect of photoshop_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:59:291359browse
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>
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%); }
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%); }
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%); }
Run the page, the effect is as follows:
4. Adjust image contrast: contrast, the syntax code is as follows:
img { -webkit-filter: contrast(500%); }
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); }
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); }
The page effect at this time is:
It was originally done using CSS features Photoshop's filter function is so simple.