Home > Article > Web Front-end > css3 filtering effect
css3 filtering effect
- WBOYOriginal
- 2016-08-04 08:53:141643browse
The picture above is the filter effect of the new features of CSS3. After learning these, we, the big web people who love beauty and handsomeness, can perfectly use code to beautify photos~~
Okay, let’s realize the white frame behind the photo first,
<style>
#div1{
/*Define width, height and color for div*/
width: 200px;
height: 250px;
background: white;
/*The inner padding distance from the photo is 15px, and the text is centered*/
padding: 15px;
text-align: center;
/* Rotate the white background -10deg */
-webkit-transform: rotate(-10deg);
/*Give the background a shadow effect*/
box-shadow: 4px 4px 4px #666;
float: left;
}
</style> <br /> <body><br /> <div id="div1"> <img src="img/001V28Mwty6Fww02IiNad&690.jpg"> <p>灰色滤镜</p> </div><br /> </body>
After writing the white background frame, it’s time to apply the filter
First, let’s take the first picture, the black and white of art
<span style="color: #000000;"> #div1 img{
</span><span style="color: #008000;">/*</span><span style="color: #008000;">把div1里面的图片百分百，等同于相对于在div1里面百分比放大填充</span><span style="color: #008000;">*/</span><span style="color: #000000;">
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;<br></span>
<span> /*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/</span>
<span style="color: #000000;"> </span>-webkit-filter: grayscale(<span style="color: #800080;">1</span><span style="color: #000000;">); }</span>
The second photo, um...an old photo.
<span style="color: #000000;">#div1 img{
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
</span>-webkit-filter: sepia(<span style="color: #800080;">1</span><span style="color: #000000;">);
}</span>
The third photo, reverse color? I’m not sure what color it is either
<span style="color: #000000;">#div1 img{
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
</span>-webkit-filter: hue-<span style="color: #000000;">rotate(200deg);
}</span>
The fourth photo seems to be covered with a layer of white fog
<span style="color: #000000;">#div1 img{
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
</span>-webkit-filter: opacity(<span style="color: #800080;">0.5</span><span style="color: #000000;">);
}
</span>
There is another photo that is not on the rendering, it is the blur effect code as follows
<span style="color: #000000;">#div4 img{
width: </span><span style="color: #800080;">100</span>%<span style="color: #000000;">;
</span>-webkit-filter: opacity(<span style="color: #800080;">0.5</span><span style="color: #000000;">);
}</span>
Okay, I’ve finished sharing my filters, now comes the beautiful pictures