Bloggers recently in the process of doing the site found a very powerful CSS3 property, is the Filter property, like the P-graph friends to see the name should know what the artifact is. Of course, the effect of this property must not be compared with PS, but the use of good words can save a lot of space, a picture made of two pictures of the effect.
1. Definition
Filter, which is literally a filter, the official Definition Filter property defines the visual effects of elements (usually ), such as Blur and saturation; for a chestnut:
<style> img{/* Grayscale 100%*/ -webkit-filter:grayscale (100%); } </style>
See this effect, Bo Friends are all beginning to start interested in filter?
2. Grammar
Filter:none | Blur () | Brightness () | Contrast () | Drop-shadow () | Grayscale () | Hue-rotate () | Invert () | Opacity () | Saturate () | Sepia () | URL ();
As you can see, the properties have a lot of optional values, what do they mean?
Grayscale Grayscale
Sepia Brown (kind of retro old photo feeling)
Saturation of saturate
Hue-rotate Hue Rotation
Invert inverse color
Opacity transparency
Brightness brightness
Contrast contrast ratio
Blur Blur
Drop-shadow Shadow
Give me a chestnut:
Here, adjust with sepia.
Example Picture:
3. Example
Below, for some of the values of the Filter property to do an example, other fun things need to explore together with friends, what fun to share with me yo
(1) hue-rotate (color rotation)
Look at the effect of the picture bar, the specific use of the effect depends on everyone to explore:
<style> . img{ -webkit-filter:hue-rotate (330deg); } </style>：
(2) blur (fuzzy)
Blur (Blur effect, Unit px)
<style> . img{ -webkit-filter:blur (1px); } </style> <body> </body>Example Picture:
(3) Invert anti-color
Invert anti-color will be the picture into a negative feeling, more useless, look at the code:
<style> . img{ -webkit-filter:invert (100%); } </style><body> </body>Example Picture:
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!
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
