With the development of web design technology, people are not satisfied with some of the original HTML tags, but want to be able to add some multimedia properties for the page, such as filters and gradient effects. The rapid development of CSS technology has made these requirements a reality. From now on I'm going to introduce you to a new CSS extension section: CSS Filter properties (Filter property). Using this technique, you can add visual filters and conversion effects to a standard HTML element, such as pictures, text containers, and other objects. For filters and gradients, the former is the basis, because the latter is the constant change in filter effects and demo turnover. When filters and gradients are combined into a basic script applet, web Designers can have a powerful tool for building dynamic interactive documents. CSS filter+ script, which means that you want to build a dynamic document and some script (scripting language) basis.
| Normal pictures <img src= "flower1.jpg" > | Fuzzy effect after processing the picture, which is more beautiful, you feel it! It is easy to achieve this effect. Just a little bit of stuff. < img src= " flower1.jpg "style=" Filter:blur (strength=50) "> |
Try it yourself and see if there is a fake! Do not use any Photoshop and other image software, simple syntax is as follows: |
|
The visual filter properties can only be used on HTML control elements. The so-called HTML space element is that they define a rectangular space on the page, the browser window can display these spaces. The HTML-legitimate controls and their descriptions are listed below.
Note: Unfortunately only IE4.0 above support, if it is another browser, then ...
| Elements | Description |
| Body | The main element of a Web page document, all visible ranges are within the <BODY> element |
| BUTTON | form field buttons, can have "send (Submit)", "Reset (reset)" and other forms |
| Div | Defines an area on a page where the height, width, or absolute position of the area is known |
| Img | A picture element that specifies the source of the picture by specifying the "src" attribute |
| INPUT | Enter a form field |
| MARQUEE | Move Marquee Effect |
| SPAN | Defines an area on a page where the height, width, or absolute position of the area is known |
| TABLE | Form |
| Td | Table Data Cells |
| TEXTAREA | Text area |
| TFOOT | Multi-line Input text box |
| TH | Table Header Cell |
| THEAD | Table title |
| Tr | Table rows |
IE4.0 Filter property sheet supported above
| Filter effects | Describe |
| Alpha | Set transparency |
| Blru | Create a Blur effect |
| Chroma | Sets the specified color to transparent |
| DropShadow | Creates an offset image contour, which casts a shadow |
| Fliph | Water rehabilitation Turn |
| Flipv | Vertical inversion |
| Glow | Increase the light efficiency for an object's outer boundary |
| Grayscale | Reduce the color of the picture |
| Invert | Complete reversal of color, saturation and brightness to create negative effects |
| Light | Light projection on an object |
| Mask | Create a transparent film for an object |
| Shadow | Create a solid contour of an object, i.e. shadow effect |
| Wave | Use sinusoidal ripples to disrupt pictures in X and y axes |
| Xray | Show only the outline of an object |
The next few pages will detail how each filter is used.
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
