Detailed analysis of new features in CSS3

Note: Due to the new characteristics of CSS3 more, so divided into two articles blog description. The first chapter includes new selectors, text and block shadows, multi-background graphs, color gradients, rounded corners, and more. The second chapter mainly CSS3 various animation effects, such as: rotate, move, zoom, etc., also include the application of the icon font.

CSS3 Property Selector:

a[href$= '. pdf ' indicates that the href attribute is selected with a. pdf end

a[href^= ' mailto ') indicates that the href attribute is selected with the beginning of mailto

A[href*= ' Item ' indicates that the HREF attribute contains Item is selected

Where a just refers to the element tag

Existing three p, their attribute name has different values:

The styles are as follows:

Add Selector:

Effect:

Then add a property selector:

Effect:

The use of selectors believe that we have been more skilled, and here is relatively simple will not repeat. This property selector is more used in the href attribute, by loading the different suffix names of the filenames to make the appropriate choices, such as. jpg. png. gif, and so on.

CSS3 pseudo-Class selector:

The existing table is as follows:

To add a pseudo-class selector:

: Nth-of-type can select odd or even rows of a table with parameters,odd represent odd lines, andeven represent even rows.

Effect:

: The Nth-child pseudo-class is also used to select rows. When the parameter is n , all rows are selected, when the argument is n+i , the following is selected from the beginning of line i ,2n means that multiples of 2 are selected, that is, even rows,3n Indicates that multiples of 3 rows are selected.

Effect:

N+i:

2n:

3n:

There is also a : Nth-last-child () pseudo-class, usage and nth-child basically consistent, but all the rules are from the bottom to the top of the number, it is equivalent to the table upside down. There is no need to say more, and interested readers can try it out for themselves.

Multi-background map:

CSS3 backgroud-image can set multiple background graphs, and you can also set the location of each background map.

Each background figure has four parameters, 1. URL address 2. Upper and lower positions, including top Center bottom, also available as Percentage 3. Position, including left centerright, percent available

4. Repeat the method, including no-repeat repeat-y repeat-x. Well understood, is uneven, vertical tiling, horizontal tiling.

(Stealing a lazy place here, readers can try it with their favorite pictures)

----------------------------------------------------------------------------I'm a split line---------------------------------------- --------------------------

It is important to note from here that, since the different kernel browsers have different support for CSS3, then all features should be prefixed.

In the following example, the blogger does not prefix or add only the-webkit-prefix in order to save time.

The specific wording is as follows:

-webkit-:webkit 's Core browser, Google's Chrome browser;

-moz-:Gecko Core Browser;

-o-:Opera Browser;

-ms-: Microsoft's IE browser.

Although a simple style will be written five times, but good web compatibility is the front-end engineer's responsibility. Each of the following features is written as an example when actually writing a Web page, including the animation characteristics of the second blog post.

Text Shadow:

Here first write a H1 tag, the content is my teacher like to use a sentence, we do not spit groove ...

Writing:

The text shadow consists of 4 parameters, 1. Horizontal offset 2. Vertical offset 3. blur radius (the higher the value the more blurred, the more clear) 4. Shadow color

Effect:

Setting a large offset can produce a floating and projected effect:

Like a light shot down?

Set multiple shadows, separated by commas. The blurring radius increases gradually, resulting in a glow effect.

The feeling of Lightbox

Set multiple shadows, offset in different directions, and set the appropriate color to create an embossed effect.

Block-level shading:

Block shadows can be applied to many block-level elements

now give a P Add a block shadow:

Effect:

The Box-shadow has 6 parameters. 1. Projection mode (optional), do not write the default external shadow,inset represents the inner shadow 2&3. Represents an offset, similar to a text Shadow 4. blur radius (optional) 5. Shadow expansion radius (optional), the larger the value, the larger the shadow range is 6. Shadow color

Inner Shadow Effect:

Existing A red circle:

With the multi-level block shadow, the expansion radius increases gradually:

The sun is coming out.

Rounded Corners:

Rounded corners are widely used and can be rounded with rounded corners.

Apply to P:

Effect:

The Border-radius parameter can be between 1 and 4:

1 parameters indicate that the value is applied to four corners;

2 parameters for the top left and bottom right with the first value, upper right and lower left with the second value;

3 parameters for the first value on the left, upper right, lower left with the second value, lower right with a third value;

4 parameters indicate that four values are used sequentially on top left, top right, bottom right, bottom left (counterclockwise).

Generally 1 and 4 parameters with more, the other a bit of egg pain.

Four parameters:

Effect:

How do you do this round angle?

Simply make the fillet value equal to half the height of the P block:

To draw a circle with rounded corners:

Build a square p block first, let its fillet value is equal to half of its edge length, the above example of the sun is made by this method.

Gradient:

There are two types of gradients: linear gradient, radial gradient

Linear gradient:

As the gradient is drawn, it is parsed into a background image by the browser, so use backgroud-image when making gradients.

The first parameter of the gradient is the starting position: Left means top to bottom from the bottom, and so on. You can then set multiple colors after which you can set the starting position of the gradient (in percent).

Effect:

Radial gradients, as the name implies, are gradients in the radius direction of the circle:

Center indicates a gradient starting from the centre

Another sun came out, notice that this is not a shadow, but a radial gradient.

"Recommended"

1. CSS3 Free Video Tutorial

2. Share a CSS3 animation library

3. Animation of CSS3 Learning

4. CSS3 Teaching Animation Production Learning

5. A detailed description of the new features of CSS3