Basic tutorials for CSS Filters basics

CSS Filter Basics

With the development of web design technology, people are not satisfied with the original HTML tags, but want to be able to add some multimedia properties for the page, such as filter and gradient effect. The rapid development of CSS technology has made these requirements a reality. From now on, I'd like to introduce you to a new CSS extension section: CSS Filter attributes (Filter properties). Using this technique, you can add visual filters and conversion effects to a standard HTML element, a sample, a text container, and other objects. For filters and gradients, the former is the basis, because the latter is the constant change of the filter effect and the replacement of the presentation. When filters and gradients are combined into a basic script applet, the Web designer can have a powerful tool for creating dynamic interactive documents. That is, the CSS filter+ script, which means that you want to create a dynamic document and some script (scripting language) basis. The normal picture Blur 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. Try it yourself and see if there is a fake! Don't you use Photoshop and other image software, the simple syntax is as follows: Filter:filtername (Parameters) Filter: Filter name (parameter) 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, and the browser's window can display the space. The following is a list of HTML-valid controls and their descriptions. Note: Unfortunately only IE4.0 above support, if it is another browser, then .... Elements Description BODY The BODY element of the Web document, all visible within the element BUTTON form field buttons, which can be sent (submit), reset (reset), and so on Div Defines an area on a Web page in which 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 form fields MARQUEE Move caption Effect SPAN Defines an area on a Web page in which 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 row 　 Filter attribute table supported above IE4.0 Filter effects Describe Alpha Set transparency Blru Create a Blur effect Chroma Sets the specified color to transparent DropShadow Create an offset image contour that casts shadows Fliph Water rehabilitation Flipv Vertical inversion Glow Add light to the outer boundary of an object Grayscale Reduce the color of the picture Invert Completely invert color, saturation, and luminance values to create a negative effect Light Light projection on an object Mask Create a transparent film for an object Shadow Creates a solid outline of an object, that is, a shadow effect Wave Use sinusoidal ripples to disrupt images in the X-and y-axis directions Xray Show only the outline of an object

