The common functions of CSS3 method



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

However, different browsers have different CSS3 implementations, compatibility is a big problem. Last week, YDN introduced the CSS3 Please website, the website and sums up some common function method.

The following is the detailed description of these writing. All of the code through the Firefox 3.6 and IE 8 verification, the original errors have been corrected.

A, fillet(Rounded Corner)

CSS3常用功能的写法 - gary - garys blog

.box_round {

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

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

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

}

Fillet is relatively simple, as long as the set a radius value can be. Unfortunately, all current IE do not support CSS fillet, wait for the IE 9.

Two, box shaped shadow(Box Shadow)

CSS3常用功能的写法 - gary - garys blog

.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 */

}

-moz-box-shadow,-webkit-box-shadow and box-shadow settings are the same, there are 4 parameters respectively, meaning: X axis, Y axis offset value, the shadow of the ambiguity, and the shadow color.

IE 6~8 the use of its unique filters, we set the three parameters: offX (X axis offset value), offY (Y axis offset value), Color (Shades).

Three, a linear gradient(Gradient)

CSS3常用功能的写法 - gary - garys blog

.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 the Firefox.

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

-moz-linear-gradient has three parameters. The first parameter represents a linear gradient direction, top is left from top to bottom, from left to right, if defined as left top, that is from the upper left to lower right corner. The second and third parameters are the starting point and end point color color. You can also insert more parameters between them, said a variety of color gradient.

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

-webkit-gradient is the realization of WebKit engine on the gradient, a total of five parameters. The first parameter represents the gradient type (type), can be a linear (linear gradient) or radial (radial gradient). The second and third parameters, are a pair of values, respectively represent gradual start point and end point. This is represented by the coordinates of value, also can be represented by the critical value, such as left top (left) and left bottom (bottom left). The fourth and fifth parameters, respectively is two color-stop functions. The color-stop function takes two arguments, the first said the position of the gradient, 0 as a starting point, 0.5 point, 1 end points; second said the color.

DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999', GradientType='0');

IE relies on the filter realization gradient. StartColorstr represents the starting point of color, endColorstr said the end color. GradientType said the gradient type, 0 as the default value, said vertical gradient, 1 said that the horizontal gradient.

Four, transparent(opacity)

Under normal circumstances, the object will cover the lower upper object.

CSS3常用功能的写法 - gary - garys blog

However, if the color of an object into a transparent, can see the underlying object through it.

CSS3常用功能的写法 - gary - garys blog

.box_rgba {

  background-color: #B4B490;

  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;

  background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */

}

Look at the first line.

background-color: #B4B490;

This is the set of objects is to prepare color, opaque color. If your browser does not support transparency, the 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;

The line is specially written for the IE, which uses DXImageTransform.Microsoft.gradient filters. We want to set the starting point for its color (startColorstr) and the end (endColorstr) color. In the case of monochromatic transparent, these two values are the same. Need to pay attention to is, their value is a eight bit hexadecimal value of sixteen, the top two alpha channel value, 00 is fully transparent, FF is fully opaque; after six is the RGB color value.

background-color: rgba(180, 180, 144, 0.6);

In addition to IE, other browsers almost support RGBA function. It has four parameters, the first three as a RGB color value, fourth opacity, here set to 0.6.

Five, rotation(rotation)

CSS3常用功能的写法 - gary - garys blog

.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 are using rotate functions, the realization of a object rotation. For example, rotate (7.5deg) represents 7.5 degrees clockwise(degree).

IE requires a complex filter DXImageTransform.Microsoft.Matrix. It received a total of five parameters, The need to calculate the first four parameters of trigonometric function, Then written as M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation), The rotation rotation angle, If 7.5 degrees clockwise, The rotation is 7.5; the fifth parameter SizingMethod said redraw mode, 'auto expand'Representative is automatically extended to the new boundary.

In addition to this filter, IE also has a slightly simpler filter DXImageTransform.Microsoft.BasicImage (rotation=x). X can only value which is 1, 2, 3, 0, respectively, clockwise 90 degrees, 180 degrees, 270 degrees and 360 degrees.

Six, the server side font(font-face)

The design of the webpage, may use a special font. If it is not installed in the machine of the customer, the text can only be displayed in normal font.

CSS3常用功能的写法 - gary - garys blog

Then you can let the user's browser to download the server side font, and then presents the designers want to effect.

CSS3常用功能的写法 - gary - garys blog

@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+ */

}

The first line of code:

font-family: 'MyFont';

Said a name for this font, can be arbitrarily set, I here is MyFont.

src: url('myfont.eot');

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

src: local('myfont.ttf'),

  url('myfont.woff') format('woff'),

  url('myfont.ttf') format('truetype');

local()The machine (the client) to find the font, if the machine has been installed, do not download. (URL) represents the font location on the server, the format () is used to illustrate the font format. Firefox 3.5 supports TrueType and OpenType fonts, Firefox 3.6 adds WOFF fonts. Other Webkit engine based on the browser (sarif, opera, chrome), at present only seems to support the TrueType.

Then, when the use of such written on it.

h2{ font-family: "MyFont"; }

Need to pay attention to is, font files must be with the webpage files from the same domain name, in accordance with the browser's “ homologous policy ”. In addition, because the Chinese font file is too large, server side font apparently only applies to English font.

Posted by Fitzgerald at November 19, 2013 - 12:52 PM