Home > Developer > JavaScript
Css3 and css3
The image above is the filter effect of the new feature of css3. After learning this, can we use code to beautify the photo on the big web ~~
Well, let's implement the white box behind the photo first,
<style>
# Div1 {
/* Define the width and color for the div */
Width: 200px;
Height: 250px;
Background: white;
/* The padding distance is 15 PX, and the text is centered */
Padding: 15px;
Text-align: center;
/* Rotate the white background to 10deg */
-Webkit-transform: rotate (-10deg );
/* Effect of shadow on the background */
Box-shadow: 4px 4px 4px #666;
Float: left;
}
</Style>
<Body>
<Div id = "div1"> <p> gray filter </p> </div>
</Body>
After the white background frame is written, it is time to filter the background.
First, the black and white of Art
# Div1 img {/* indicates that the image in div1 is 100% percent, which is equivalent to enlarging the padding ratio relative to the percentage in div1 */width;
/* Change the image to a color value in black and white brackets. The value can only be 0 ~ Between 1 */
-webkit-filter: grayscale(1); }
The second photo, forehead... old one.
#div1 img{ width: 100%; -webkit-filter: sepia(1); }
The third photo is reversed? I don't know the color either.
#div1 img{ width: 100%; -webkit-filter: hue-rotate(200deg); }
The fourth photo is like a white mist.
#div1 img{ width: 100%; -webkit-filter: opacity(0.5); }
There is still a picture on it. The fuzzy effect code is as follows:
#div4 img{ width: 100%; -webkit-filter: opacity(0.5); }
Now, my filter has been shared. Next, let's go to the meitu.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
