Home > Developer > CSS

A simple example of CSS3 filtering effect

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
The following small series for everyone to bring a CSS3 filter effect simple example. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.

The above picture is CSS3 new features of the filter effect, learn these so we love the beauty of this group of big web is not perfect in the code to achieve the picture beautify the pinch ~ ~

OK, let's start with the white box in the back of the picture.

<style> #p1 {   /* to P define width height and color */   width:200px;   height:250px;   Background:white;    /* Fill distance photo is 15px, text Center */   padding:15px;   Text-align:center;   /* Rotate the white background -10deg  *   /-webkit-transform:rotate ( -10deg);   /* Give background a shadow effect */   box-shadow:4px 4px 4px #666;   Float:left;   }   </style><br><body><br><p id= "P1" ><p> Grey filter </p></p><BR></body>

After writing the white background frame, it's time to go to the filter.

First one, the black and white art

#p1 img{/   * P1 inside the picture hundred percent, equivalent to in the P1 inside the percentage of the enlarged fill */   width:100%; 　　   /* Turn the picture into black and white brackets with color change values, can only take 0~1 between *   /-webkit-filter:grayscale (1); }

The second picture, the sum ... Old photos.

#p1 img{               width:100%;               -webkit-filter:sepia (1);           }

Third photo, anti-color? I don't know what color it is.

#p1 img{               width:100%;               -webkit-filter:hue-rotate (200deg);           }

The last picture, as if it were a white mist

#p1 img{               width:100%;               -webkit-filter:opacity (0.5);           }

There is also a picture on the No, is the blur effect code as follows

#p4 img{               width:100%;               -webkit-filter:opacity (0.5);           }

All right, my filters are over, and then the beauty map goes.

Above this CSS3 filter effect Simple example is small series to share all the content of everyone, hope to give you a reference, also hope that we support topic.alibabacloud.com.

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.

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.

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