CSS3 Notes (i)

At the very beginning of the CSS3 a new property is a private browser, and then the web may be used to make a standard, before the standard can only use private attributes (prefixed) to express the implementation of their respective vendors, mainly when the CSS3 just appeared, It implies that the CSS property or rule has not yet become part of the World Wide Web Standard, although the modern browser has supported many CSS3 properties, but CSS3 is not yet fully supported, so we need to use some specific declarations to improve compatibility, unfortunately IE8 and the following browsers do not currently support CSS3.

1.CSS3 Standard

To enhance browser compatibility, use the following specific declaration as much as possible when using the CSS3 property:

* Gecko (Mozilla/firefox) browser prefix:-moz-
* Webkit (safari/chrome) browser prefix:-webkit-

For example, the border Fillet property is written as:

. Round {

border:5px solid #ccc;

-moz-border-radius:15px; /* Gecko Browsers */

-webkit-border-radius:15px; /* Webkit Browsers */

border-radius:15px; /* Syntax * *

}

2. Rgba Color Mode

Before CSS3, the color value specified in the style can only be an RGB color value, and the transparency of the element can only be set through the Opacity property. The Rgba color value is increased in CSS3, and the translucent effect is enabled by the method of setting the alpha channel on the RGBA color value. The transparency values range from 0 to 1, 0 is completely opaque, and 1 is completely transparent.

When it comes to transparency, it has to be opacity, and it is also used to set the transparency, what difference does it have with the transparency of RGBA?

The transparency of 1.opacity refers to the transparency of the entire element, and we use opacity in the parent element, and its descendant elements are affected by it.

2. When you use the alpha channel to set the transparency of an element, you can specify transparency independently of the element's background color and text color, without affecting the descendants.

3. Several CSS3 "mainstream" attributes that should be of concern

1. Rounded Corners (Border-radius)

Rounded corners are one of the most common visual effects, and buttons and background borders use rounded corners to make elements lively. CSS3 before the traditional way to modify the effect is to use the picture, not only affect the loading speed and difficult to maintain, now only need to set the Fillet property on it, the core only a simple sentence: border-radius:10px 10px 10px 10px, As long as the simple change of the value of the parameters can be flexibly change the size of the fillet, a little change Bingchang radius can be transformed half-circle, diagonal, four-leaf grass and more effects.

2. Shadows (Box-shadow)

One of the most common visual effects that can make an element solid, often used for buttons, input boxes, and so on.

Core code: box-shadow:5px 5px 5px 0 #ccc;

The first two parameters set the horizontal and vertical displacement, the third is the shadow blur distance, the fourth shadow size, the shadow color, the default is the outer shadow, if you need to use the inner shadow, you need to add the inset parameter after the background color.

3. Deformation (Transform)

Currently the transform attribute mainly applies the element 2D transformation. This property allows us to deform elements such as rotation (rotate), scaling (scale), moving (translate), or skew (skew) , respectively, with x, y points, such as:Rotatex () and rotatey () , and so on. To enhance the interactive dynamic effect .

Transform, In addition to what can be set, can also be set from where to change, that is, the deformation source point (transform-origin), the default is from the element's most central point, We can change the source point of the deformation by setting its value.

For example, we can change the size of an element in the following ways:

Transform:scale (1.1);---------- overall magnification 1.1 times

Transform:scale (1.1,0.9);------ Zoom in 1.1 , Zoom out 0.9 times

Transform:scalex (1.1);------ only zoom in and out 1.1 times, vertical

Transform:scaley (1.1),------ transverse, vertical magnification 1.1 times

transform-origin:0 0;-------- with the top left corner as the deform source point

4. Transition (Transition)

Element used to deformation properties, you have to mention the transition properties, imagine a div rotated 45 degrees, if it happens in a flash, is not very abrupt and no sense of beauty? If it is a smooth transition within a certain time interval, is it a similar animation interactive effect?

With transition, we're switching from one effect to another without JavaScript or flash, just a piece of CSS code.

The Transition property is a shorthand property for setting four transition properties:

1.transition-property-----changed attributes, such as width,opacity, or write all directly can.

2.transition-duration----transition time, in seconds, that specifies how many seconds to complete the transition effect

3.transition-timing-function speed curve for----speed effect

4.transition-delay-----When the transition effect starts

For example:

transition:width 2s ease-in-out;

It is believed that front-end engineers are excited about these features of CSS3. It gives web designers and developers more power and makes many things easier. Now we just have to wait for all browsers to support it.

CSS3 Notes (i)