Practical development of CSS3: Use CSS3 to implement the filtering effect of photoshop, css3photoshop

Practical development of CSS3: Use CSS3 to implement the filtering effect of photoshop, css3photoshop

We know that using Photoshop to adjust the brightness and contrast of an image, or converting an image to grayscale is a common feature. Today, I will introduce several new features. We use CSS to add the same effect to web images.

First, display an image on the webpage. the html code is as follows:

<! DOCTYPE html> 
 
Run the following command:

Next, I will introduce the corresponding features and demonstrate how to apply image filtering styles.
I. Adjust the gray scale of the image: grayscale, range: 0%-100%. The application style code is as follows:
img {       -webkit-filter: grayscale(100%);  } 
 
The page effect is as follows:

2. Apply the dark brown effect to the image: sepia. The syntax code ranging from 0 to 100% is as follows:
img {       -webkit-filter: sepia(100%);  }  
 
In this case, run the page effect:

3. Adjust the image exposure: brightness, which ranges from 0% to 100%. The syntax code is as follows:
img {      -webkit-filter: brightness(40%);   }  
 
The running page has the following effects:

4. Adjust the image contrast: contrast. The syntax code is as follows:
img {      -webkit-filter: contrast(500%);   }  
 
The page effect is as follows:

Finally, we will introduce a special fuzzy effect: blur. The syntax code is as follows:
img {      -webkit-filter: blur(2px);   } 
 
The page effect is as follows:

Of course, the above features can be used at the same time. For example, when you move the mouse over an image, the image turns gray and blurred, the Code is as follows:
img:hover {      -webkit-filter:grayscale(100%) blur(2px);   }  
 
The page effect is as follows:

 
It was so easy to use the CSS feature to complete the filtering function of Photoshop.
 

With CSS3, how does one implement a rounded border?
# Gaga {border: 3px solid # f00; border-radius: 5px 6px 7px 8px ;}
5 PX indicates the radians in the upper left corner;
6px indicates the radians in the upper right corner;
7px indicates the radians in the lower right corner;
8 PX indicates the radians in the lower left corner;
Hope to help you

How to Implement gradient effect in CSS3
To obtain the above linear gradient effect, we will define the CSS3 style as follows: background-image:-moz-linear-gradient (top, # 8fa1ff, # 3757fa ); /* Firefox */background-image:-webkit-gradient (linear, left top, left bottom, color-stop (0, # ff4f02), color-stop (1, #8f2c00);/* Saf4 +, Chrome */filter: progid: DXImageTransform. microsoft. gradient (startColorstr = '# c6ff00', endColorstr =' #538300 ', GradientType = '0');/* IE */-moz-linear-gradient has three parameters. The first parameter indicates the direction of the linear gradient, top is from top to bottom, left is from left to right, if defined as left top, it is from top left to bottom right. The second and third parameters are the start color and end color respectively. You can also insert more parameters between them to indicate gradient of multiple colors. -Webkit-gradient is the implementation parameter of the webkit engine for gradient. There are five parameters in total. The first parameter indicates the gradient type (type), which can be linear (linear gradient) or radial (radial gradient ). The second and third parameters are both a pair of values, indicating the gradient start point and end point respectively. These values can be expressed in coordinates or key values, such as left top (upper left corner) and left bottom (lower left corner ). The fourth and fifth parameters are two color-stop functions. The color-stop function accepts two parameters. The first parameter indicates the gradient position. 0 indicates the starting point, 0.5 indicates the midpoint, and 1 indicates the ending point. The second parameter indicates the color of the gradient. IE uses a filter to implement gradient. StartColorstr indicates the starting point color, and endColorstr indicates the ending point color. GradientType indicates the gradient type. 0 is the default value, indicating the vertical gradient. 1 indicates the horizontal gradient. Linear gradient uses the from () and to () Methods to specify the transition color points: background:-webkit-gradient (linear, left top, left bottom, from (#96ff00 ), color-stop (0.5, orange), to (rgb (255, 0, 0); linear gradient multiple transition points at the same position: background:-webkit-gradient (linear, left top, left bottom, from (#00 abeb), to (# fff), color-stop (0.5, # fff), color-stop (0.5, #66cc00 )); demonstration of comprehensive radial gradient effect: