Some new features of CSS3

Background:rgba (254, 255, 200, 0.75);

As shown in the above code, the first three parameters are R, G, B three, respectively, and the range is 0-255. The fourth parameter is the background transparency, the range is 0-1, as 0.5 represents the transparency 50%. This property allows us to do a translucent glass effect like Win7 in the browser.

CSS3 Fillet Sample Code

/*firefox Syntax */

-moz-border-radius:6px 6px 6px 6px;

-moz-border-radius-topright:6px;

-moz-border-radius-topleft:6px;

-moz-border-radius-bottomright:6px;

-moz-border-radius-bottomleft:6px;

/*webkit Core Browser Syntax */

-webkit-border-radius:6px 6px 6px 6px;

-webkit-border-top-right-radius:6px;

-webkit-border-top-left-radius:6px;

-webkit-border-bottom-right-radius:6px;

-webkit-border-bottom-left-radius:6px;

/*CSS Standard Syntax */

border-radius:6px 6px 6px 6px;

border-top-right-radius:6px;

border-top-left-radius:6px;

border-bottom-right-radius:6px;

border-bottom-left-radius:6px;

As shown in the preceding code, the four-corner effect can be specified by a line of code border-radius:6px 6px 6px 6px, where four parameters are represented from left to right: Upper-left corner, upper-right corner, lower-right corner, lower-left corner. It can also resemble border-top-right-radius:6px, which specifies the effect of each corner separately.

Fade color

Background:-moz-linear-gradient (

Center top,/* The coordinates of the beginning of the gradient */

RGBA (254, 216, 80, 0.75),/* Gradient start color */

RGBA (230, 125, 30, 0.75) 50%,/* Middle Gradient color */www.2cto.com

RGBA (254, 235, 121, 0.75)/* Gradient End color */) Repeat scroll 0 0 transparent;

As shown in the code above, Mozilla uses the-moz-linear-gradient tag to represent a linear gradient. The first parameter represents the coordinates at which the gradient starts, which can be a coordinate value or top, bottom, left, right, center equivalent. The next parameter is the color value of the gradient, with an unlimited number, separated by commas. Each color value can be a normal hexadecimal color, or it can be an RGBA color value. Each color can also be followed by a percentage or a decimal between 0-1, indicating the proportion of the color throughout the gradient.

WebKit Gradient Color syntax

Background:-webkit-gradient (

linear,/* Gradient Type Linear */

Left top,/* the coordinates of the beginning of the gradient */

Left bottom,/* the coordinates of the end of the gradient */

From (RGBA (254, 216, 80, 0.75)),/* Gradient start color */

to (RGBA (254, 235, 121, 0.75)),/* Gradient end color */

Color-stop (0.5,rgba (230, 125, 30, 0.75)/* middle color of gradient */

)

Repeat scroll 0 0 transparent;

Webkit browsers use the-webkit-gradient property to represent gradients. The first parameter is a gradient type, usually a linear linear gradient. The second parameter is the coordinate at which the gradient starts, and the first parameter of Mozilla is the same. The third parameter is the coordinate at which the gradient ends. The fourth and fifth are the colors at which the gradient starts and ends, either a hexadecimal color value or an RGBA color value. The last Color-stop attribute can have countless, separated by commas after the first five parameters, representing the gradient color of the middle of a home change. In the Color-stop property, the first parameter is the percentage of the gradient, which can be a fraction of 0-1 or a percentage, and the second parameter is the color value of the gradient, which can also be a hexadecimal color value or an RGBA color value.

Deformation

Deformation Transform is another heavy bomb after the linear color gradient of CSS, usually using CSS and HTML it is not possible to make HTML elements rotate or tilt a certain angle. To make the elements look more solid, we have to make a picture of this effect, which limits a lot of dynamic usage scenarios. The introduction of the Transform attribute allows us to use a vector drawing method such as SVG to achieve the function, only need a simple CSS properties can be implemented. The Transform properties in CSS3 include rotate rotation, scale scaling, translate coordinate translation, skew coordinate tilt, matrix matrix transformation. Let's take a look at how each property is used.

/*webkit Core Browser */

-webkit-transform:rotate ( -90DEG);

-webkit-transform:scale (2);

-webkit-transform:scale (2, 1);

-webkit-transform:translate (10px, 20px);

-webkit-transform:skew (30deg, -10deg);

-webkit-transform:matrix (1,-0.2, 0, 1, 0, 0);

/*firefox Browser */

-moz-transform:rotate ( -90DEG);

-moz-transform:scale (2);

-moz-transform:scale (2, 1);

-moz-transform:translate (10px, 20px);

-moz-transform:skew (30deg, -10deg);

-moz-transform:matrix (1,-0.2, 0, 1, 0, 0);

/*opera Browser */

-o-transform:rotate ( -90DEG);

-o-transform:scale (2);

-o-transform:scale (2, 1);

-o-transform:translate (10px, 20px);

-o-transform:skew (30deg, -10deg);

-o-transform:matrix (1,-0.2, 0, 1, 0, 0);

The Rotation property code is very simple, the Rotate property plus the rotation angle parameter, the 45deg represents a clockwise rotation of 45 degrees. If it is rotated 45 degrees counterclockwise, it is -45deg.

Similar to rotation, the scale attribute is implemented by the SCALE keyword plus the scaling parameter. When there is only one parameter 2, the X-axis, Y-axis direction of the HTML element is magnified by 2, and 0.5 means that it shrinks by half. If there are 2 and 32 parameters at the same time, the X-axis of the HTML element is magnified by 2 by the Y-axis direction is magnified by 3.

The coordinate translation property, as its name implies, translates the HTML element to the X-and Y-axis in several pixels and is implemented by the Translate property. The following two parameters represent the amount of translation to the X-axis, Y-axis, respectively.

The skew property is also a useful transform feature that can tilt an object around the X and Y axes at a certain angle. This is not the same as the rotation of the rotate, rotate only rotates without changing the shape of the HTML element, and skew makes the shape of the HTML element change. The skew has two parameters that represent the degree of tilt of the HTML element along the X and Y axes, respectively.

Matrix, you're not mistaken, that's our usual transformation of matrices. This transformation is the coordinate system transformation we learned in analytic geometry. He has six parameters (A, B, C, D, E, F) and is a 3x3 matrix that represents the transformation matrix of the coordinate transformation. Using it, we can flexibly complete any coordinate system transformations. Interested friends can look at the university's analytic geometry textbook, or in SVG, the definition and description of Matrix changes.

Browsers that currently support these 5 rollover properties have Safari 4+, Chrome 5+, Firefox 3.5+, and Opera10.5+,ie full range of browsers that do not support this property.

