Home > Developer > CSS

Css Filter Basics

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS Filter Basics

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 filter and gradient effects. The rapid development of CSS technology has made these needs a reality. From now on, I want to introduce a new CSS Extension Section: Filter Properties ). Using this technology, you can add visual filters and conversion effects to a standard HTML element, sample, text container, and other objects. The former is the basis for filters and gradient effects, because the latter is the constant change of filter effects and the replacement of demo effects. When filters and gradient effects are combined into a basic script applet, web designers can have a powerful tool for creating dynamic interaction documents. That is, css filter + SCRIPT, which indicates that the SCRIPT (SCRIPT language) is required for creating dynamic documents.

Normal image Which of the images after the blur effect processing is more beautiful? What do you think! It is easy to achieve this effect. Just add something.

Try it on your own and see if it is false! The simple syntax is as follows:
Filter: filtername (parameters): filter Name (parameter)

Visual filter attributes can only be used on HTML control elements. The so-called HTML space elements define a rectangular space on the page, which can be displayed in a browser window. The following lists the valid HTML controls and their descriptions.

Note: Unfortunately, only IE4.0 and above are supported. If it is another browser, then .......

Element Description
BODY The main element of the webpage document. All visible ranges are within the <BODY> element.
BUTTON Form field buttons can be in the form of "Send (submit)" or "reset (reset )"
DIV Defines an area on the web page. The height, width, or absolute position of this area is known.
IMG Specifies the image source by specifying the "src" attribute.
INPUT Input form field
MARQUEE Move subtitle Effect
SPAN Defines an area on the web page. The height, width, or absolute position of this area is known.
TABLE Table
TD Table data cell
TEXTAREA Text area
TFOOT Multi-line Input text box
TH Table title Cell
THEAD Table title
TR Table row

　

Filter Attribute Table supported above IE4.0

Filter Effect Description
Alpha Set transparency
Blru Create a blur effect
Chroma Set the specified color to transparent
DropShadow Creates an offset image profile, that is, a projection shadow.
FlipH Horizontal reversal
FlipV Vertical Inversion
Glow Adds light effects to the outer boundary of an object.
Grayscale Reduces the color of an image.
Invert Completely invert the color, saturation, and brightness values to create a negative effect.
Light Light Projection on an object
Mask Create a transparent film for an object
Shadow Create a solid contour of an object, that is, shadow effect.
Wave Use sine ripple on the X and Y axes to disrupt the image
Xray Show only the outlines of Objects

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
filter css black and white basics filter filter opengl basics acls basics scada basics pbx basics
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More