The writing of common functions of CSS3

Nanyi

Date: March 15, 2010

With the upgrade of the browser, CSS3 can already be put into practical application.

However, different browsers have different CSS3 implementations, and compatibility is a big problem. Last week's Ydn introduced the CSS3 website, which summarizes some of the commonly used functions.

Here is a detailed description of these formulations. All the code has been verified by Firefox 3.6 and IE 8.0, and the original error has been corrected.

First, fillet (rounded Corner)

. box_round {

-moz-border-radius:30px; /* ff1+ */

-webkit-border-radius:30px; /* saf3+, Chrome */

border-radius:30px; /* Opera 10.5, IE 9 */

}

The realization of rounded corners is simple, as long as a radius value can be set. Unfortunately, all of the current IE does not support CSS fillet, to wait until IE 9 line.

Second, box-shaped shadow (box Shadow)

. Box_shadow {

-moz-box-shadow:3px 3px 4px #ffffff; /* ff3.5+ */

-webkit-box-shadow:3px 3px 4px #ffffff; /* saf3.0+, Chrome */

box-shadow:3px 3px 4px #ffffff; /* Opera 10.5, IE 9.0 */

Filter:progid:DXImageTransform.Microsoft.dropshadow (offx=3px, offy=3px, color= ' #ffffff '); /* IE6,IE7 */

-ms-filter: "Progid:DXImageTransform.Microsoft.dropshadow (offx=3px, offy=3px, color= ' #ffffff ')"; /* IE8 */
}

The settings for-moz-box-shadow,-webkit-box-shadow, and Box-shadow are the same, with 4 parameters, meaning: X-axis offset, y-axis offset, shadow blur, and shadow color.

IE 6~8 uses its unique filter, which requires three parameters: OFFX (x-axis offset), Offy (Y-axis offset), and color (shadow color).

Three, linear gradient (Gradient)

. box_gradient {

Background-image:-moz-linear-gradient (Top, #444444, #999999); /* FF3.6 */

Background-image:-webkit-gradient (linear,left top, left bottom, color-stop (0, #444444), Color-stop (1, #999999)); /* saf4+, Chrome */

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #444444 ', endcolorstr= ' #999999 ', gradienttype= ' 0 '); /* IE6,IE7 */

-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #444444 ', endcolorstr= ' #999999 ', Gradienttype= ' 0 ') "; /* IE8 */

}

Look at Firefox first.

-moz-linear-gradient (Top, #444444, #999999);

The-moz-linear-gradient has three parameters. The first parameter represents the direction of the linear gradient, top is from top to bottom, left to right, and if it is defined as left top, it is from the upper-right corner to the bottom-bottom corner. The second and third parameters are the start and end colors, respectively. You can also insert more parameters between them, representing a gradient of multiple colors.

-webkit-gradient (Linear,left top, left bottom, color-stop (0, #444444), Color-stop (1, #999999));

-webkit-gradient is the implementation of the WebKit engine for the gradient, with a total of five parameters. The first parameter represents the gradient type (type), which can be either linear (linear gradient) or radial (radiation gradient). The second and third arguments are a pair of values that represent the beginning and end of the gradient, respectively. This pair of values can be expressed in the form of coordinates, or as a key value, such as the left top (upper right corner), and the left bottom (lower right corner). The fourth and fifth parameters, respectively, are two color-stop functions. The Color-stop function accepts two parameters, the first represents the position of the gradient, 0 is the starting point, 0.5 is the midpoint, 1 is the end point, and the second represents the color of the point.

DXImageTransform.Microsoft.gradient (startcolorstr= ' #444444 ', endcolorstr= ' #999999 ', gradienttype= ' 0 ');

IE relies on filters for gradients. STARTCOLORSTR represents the color of the starting point, and endcolorstr represents the end color. GradientType represents a gradient type, 0 is the default value, represents a vertical gradient, and 1 represents a horizontal gradient.

Iv. Transparency (opacity)

Under normal circumstances, objects on the upper level will overwrite the underlying objects.

However, if you change the color of the upper object to transparent, you can see the underlying object through it.

. Box_rgba {

　　

Background:transparent;

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #99B4B490 ', endcolorstr= ' #99B4B490 '); /* IE6,IE7 */

-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #99B4B490 ', endcolorstr= ' #99B4B490 ')"; /* IE8 */

Zoom:1;

/* ff3+, saf3+, Opera 10.10+, Chrome */

}

Look at the first line first.

This is the color of the set object's pre-color, which is opaque. If the browser does not support transparency, this color will be displayed.

Background:transparent;

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #99B4B490 ', endcolorstr= ' #99B4B490 '); /* IE6,IE7 */

-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #99B4B490 ', endcolorstr= ' #99B4B490 ')"; /* IE8 */

Zoom:1;

These lines are written specifically for IE, which mainly uses the DXImageTransform.Microsoft.gradient filter. We want to set the start color (STARTCOLORSTR) and the finish color (ENDCOLORSTR) for it. In the case of monochromatic transparency, the two values are the same. It is important to note that their value is a eight-bit hexadecimal value, the first two bits represent the alpha channel value, 00 is completely transparent, the FF is completely opaque, and the next six bits are the RGB values of the color.

In addition to IE, the RGBA function is supported in almost all other browsers. It has four parameters, the first three is the RGB value of one color, the fourth is transparency, and this is set to 0.6.

V. Rotation (rotation)

. box_rotate {

-moz-transform:rotate (7.5DEG); /* ff3.5+ */

-o-transform:rotate (7.5DEG); /* Opera 10.5 */

-webkit-transform:rotate (7.5DEG); /* saf3.1+, Chrome */

Filter:progid:DXImageTransform.Microsoft.Matrix (m11=0.9914,m12=-0.1305,m21=0.1305,m22=0.9914,sizingmethod= ' Auto expand ');

-ms-filter: "Progid:DXImageTransform.Microsoft.Matrix (M11=0.9914,m12=-0.1305,m21=0.1305,m22=0.9914,sizingmethod = ' Auto expand ') "; /* IE8 */

}

In addition to IE, other browsers use the Rotate function to achieve the rotation of an object. For example, rotate (7.5deg) indicates a clockwise rotation of 7.5 degrees (degree).

IE needs to use a complex filter DXImageTransform.Microsoft.Matrix. It accepts a total of five parameters, the first four parameters need to calculate the trigonometric functions, and then respectively written M11 = cos (rotation), M12 =-sin (rotation), M21 = sin (rotation), M22 = cos (rotation), Where the rotation represents the rotation angle, if rotated 7.5 degrees clockwise, then rotation is 7.5, and the fifth parameter Sizingmethod represents the redraw method, ' auto expand ' stands for auto-scaling to the new boundary.

In addition to this filter, IE has a slightly simpler filter DXImageTransform.Microsoft.BasicImage (rotation=x). The x can only be 1,2,3,0, indicating 90 degrees, 180 degrees, 270 degrees, and 360 degrees clockwise.

Vi. Server-side fonts (font-face)

When designing a Web page, you might use a particular font. If the user is not installed in the machine, the text can only be displayed in normal font.

At this point, the user's browser can download the server-side font, and then it will be able to show the designer's desired effect.

@font-face {

font-family: ' MyFont ';

Src:url (' Myfont.eot '); /* ie6+ */

Src:local (' Myfont.ttf '),

URL (' myfont.woff ') format (' Woff '),/* FF3.6 */

URL (' Myfont.ttf ') format (' TrueType '); /* ff3.5+, saf3+,chrome,opera10+ */

}

First line of code:

font-family: ' MyFont ';

It means a name for this font, you can set it at will, I use MyFont.

Src:url (' Myfont.eot ');

This line represents the font location, because IE only supports server-side EOT fonts, so this line is dedicated to ie.

Src:local (' Myfont.ttf '),

URL (' myfont.woff ') format (' Woff '),

URL (' Myfont.ttf ') format (' TrueType ');

Local () indicates that the font is found on the native (client), and if the machine is already installed, it is not downloaded. The URL () represents the location of the font on the server, and format () is used to describe the font format. Firefox 3.5 supports TrueType and OpenType fonts, and Firefox 3.6 adds Woff fonts. Other browsers based on the WebKit engine (Sarif,opera, chrome) now seem to support only TrueType.

Then, use the time to write it.

h2{font-family: "MyFont";}

Note that the font file must be from the same domain name as the Web page file and conform to the browser's "Same Origin policy". Also, because the Chinese font file is too large, the server-side font is obviously only available for English fonts.

Vii. Other

With CSS3, you can also complete transform (deform), including skew (skew) and scale (scaling), and CSS transitions (dynamic transformations). The content will be supplemented later.

Finish

Document Information

• Copyright Disclaimer: Free Reprint-Non-commercial-non-derivative-maintain attribution (Creative Commons 3.0 license)

The writing of common functions of CSS3