New properties of CSS3 and their usage

New properties of CSS3 and their usage

Nowadays, with the popularity of Web2.0 technology, the previous CSS2 standards and related technologies seem to be unable to meet the growing need for development: people need to achieve a more aesthetically pleasing, user-experience-better interface. CSS3, this new generation of standards emerged. In order to meet the existing development requirements for WEB UI, it provides a series of powerful features, such as many new CSS properties (text, layout, color, etc.), various CSS effects, and even support for CSS animation, element transformation. These new CSS features at this stage can be said to be very powerful and perfect, you only need to add a few lines of simple CSS code can achieve a series of bright effects, which is much better than we used to simulate the JavaScript, not only reduce complexity, become easy to maintain, In performance has also been rapid. This article will focus on the new features of CSS3 and some tips on how to use them.

Brief introduction:

CSS is a cascading style sheet (cascading Stylesheet). CSS technology is used in WEB development to effectively control the layout, font, color, background and other effects of the page. Just a few simple changes, you can change the appearance and format of the page. CSS3 is an upgraded version of CSS, this new set of standards provides richer and more practical specifications, such as: Box model, List module, Hyperlink way, language module, background and border, text effects, multi-column layout and so on, there are many browsers have successively supported this upgrade specification, such as: Firefox, Chrome, Safari, Opera, and more. The adoption of CSS3 technology in WEB development will significantly beautify our applications, improve the user experience, and greatly improve the performance of the program. This article will focus on some of the more beautiful and practical CSS3 new features.

One, CSS3 selector (Selector)

People who have written CSS should be familiar with CSS selectors, and the CSS properties we define can be applied to the corresponding nodes because of CSS selector mode. Refer to the following code:

Listing 1. CSS Selector case

Body > Maintabcontainer  div  > span[5]{  border:1px solod red;  Background-color:white;  Cursor:pointer;  }

The CSS selector here: "Body >. Maintabcontainer div span[5]" represents this path:

1. "Body" tag all elements of the class attribute value "Maintabcontainer" in the immediate child element A

2. A descendant element (descendant) in which all elements of the div are labeled B

3. The 5th tag in the direct child element of B is the element C of span

This c element (possibly multiple) is the element that the selector is anchored to, such as the CSS properties on it all applied to the C element.

These are the main positioning methods provided by CSS2 and previous versions. Now, the CSS3 offers more convenient and fast selectors:

Listing 2. CSS3 Selector case

Body > Maintabcontainer  tbody:nth-child (even) {  background-color:white;  }  Body >. Maintabcontainer  tr:nth-child (odd) {  background-color:black;  }  : Not (. textinput) {  font-size:12px;       }       div:first-child{       border-color:red;       }

As shown above, we have listed some of the CSS3 selectors that may be used frequently in our daily development, and these new CSS3 features solve many of the problems we need to solve with JavaScript scripts before.

Tbody:nth-child (even), Nth-child (odd): Here they represent the even and odd lines (TR) below the table (TBODY), which is very well suited to tables, giving people a very clear view of the difference between rows and rows in a table. Make it easy for users to navigate.

: Not (. textinput): This means that all the classes are not "textinput" nodes.

Div:first-child: This represents the first direct child node below all div nodes.

In addition, there are a number of newly added selectors:

E:nth-last-child (n)  e:nth-of-type (n)  e:nth-last-of-type (n)  e:last-child  e:first-of-type  E : Only-child  e:only-of-type  e:empty  e:checked  e:enabled  e:disabled  e::selection  E : Not (s)

This is not covered here. Learning to use these new features can greatly reduce our fearless code and greatly improve the performance of the program.

Second, @Font-face characteristics

Font-face can be used to load font styles, and it can also load the server-side font files, allowing the client to display fonts that the client does not have installed.

First look at a simple case of client fonts:

Listing 3. Font-face Client Font case

<p><font face= "Arial" >arial Courier verdana</font></p>

We can load the font style directly in this way, because these fonts (Arial) are already installed on the client. Listing 3 has the same effect as listing 4:

Listing 4. Basic font notation

<p><font style= "font-family:arial" >arial Courier verdana</font></p>

I believe this kind of writing should be more familiar to us.

Next we look at how to use the server-side font, which is the font style that is not installed on the client.

See the following code:

Listing 5. Font-face Service-side font case

@font-face {  font-family:borderweb;  Src:url (BORDERW0.EOT);  }  @font-face {  font-family:runic;  Src:url (RUNICMT0.EOT);  }  . border {font-size:35px; Color:black; font-family: "Borderweb"}  . event {font-size:110px; Color:black; font-family: "Runic"}

The two server-side fonts declared in Listing 5, whose font source points to "Borderw0.eot" and "Runicmt0.eot" files, are labeled "Borderweb" and "runic" with their font names respectively. After the declaration, we can use: "font-family:" Borderweb "and" font-family: "Runic" "in the page.

This approach allows us to use this approach in development if we need to use some special fonts without being sure that the client is installed.

Three, Word-wrap & Text-overflow style Word-wrap

Let's take a look at the Word-wrap property and refer to the following code:

Listing 6. Word-wrap case

<div style= "width:300px; border:1px solid #999999; Overflow:hidden ">  wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword  </div>  <div style= "width:300px; border:1px solid #999999; word-wrap:break-word;" >  wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword  </div>

Comparing the above two pieces of code, adding "Word-wrap:break-word", sets or retrieves whether the line is broken when the current row exceeds the bounds of the specified container, and the text is now split. So the following differences can be seen:

Text-overflow

Knowing the principle of word-wrap, let's take a look at Text-overflow, in fact, it works with Word-wrap, and word-wrap sets or retrieves whether to break a career change when the current row exceeds the bounds of the specified container, and Text-overflow Sets or retrieves how the current row will appear when it exceeds the bounds of the specified container, as shown in the following example:

Listing 7. Text-overflow case

. clip{text-overflow:clip; overflow:hidden; white-space:nowrap    ; Width:200px;background: #ccc;}  . ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap    ; width:200px; Background: #ccc;}  <div class= "clip" >   does not display ellipsis, but simple trim bar </div>  <div class= "ellipsis" >   show ellipsis when text inside an object overflows </div>

As shown in Listing 7, here we all use "Overflow:hidden", for the "Text-overflow" attribute, there are "clip" and "Ellipsis" two options available. See Figure 3.

Figure 3. Text-overflow

Here we can see, ellipsis display way more humane, clip way more traditional, we can choose according to the needs.

Four, text rendering (text-decoration)

CSS3 inside began to support a deeper rendering of the text, let's take a look at the following example:

Listing 8. Text-decoration case

div {  -webkit-text-fill-color:black;  -webkit-text-stroke-color:red;  -webkit-text-stroke-width:2.75px;  }

Here we mainly take WebKit kernel browser as an example, listing 8 of the Code Effect 4:

Text-fill-color: Text interior fill color

Text-stroke-color: Text Boundary fill Color

Text-stroke-width: Text Border width

V. CSS3 multi-column layouts (multi-column layout)

CSS3 has now been able to do simple layout processing, this CSS3 new feature has again reduced the amount of our JavaScript code, refer to the following code:

Listing 9. CSS3 Multi-Column layout

. multi_column_style{  -webkit-column-count:3;  -webkit-column-rule:1px solid #bbb;  -webkit-column-gap:2em;  }  <div class= "Multi_column_style" >  "..... ....." .................  </div>

Here we still take the WebKit kernel browser as an example:

Column-count: Represents a few columns of layout.

Column-rule: A style that represents the spacing bar between columns

Column-gap: Represents the interval between columns

Six, border and color (color, border)

With regard to color, the CSS3 has been supported by transparency:

Listing 10. Transparency of colors

Color:rgba (255, 0, 0, 0.75);  Background:rgba (0, 0, 255, 0.75);

The "a" in the "Rgba" attribute here represents transparency, that is, "0.75" here, and CSS3 also supports the HSL color declaration method and its transparency:

Listing 11. HSL's Transparency

Color:hsla (112, 72%, 33%, 0.68);

Fillet support is available for BORDER,CSS3:

Listing 12. Fillet case

border-radius:15px;

Seven, CSS3 gradient effect (Gradient) linear gradient

Top left (0% 0%) to top right (0% 100%): left-to-right horizontal gradient

Listing 13. Left-to-right gradient

Background-image:-webkit-gradient (linear,0% 0%,100% 0%,from (#2A8BBE), to (#FE280E));

Here linear represents a linear gradient, from left to right, from Blue (#2A8BBE) to Red (#FE280E) gradients.

Similarly, there can be gradient transitions from top to bottom for any color:

There are also more complex gradients, such as horizontal gradients, green at 33%, and Orange at 66%:

Listing 14. Complex linear gradients

Background-image:-webkit-gradient (linear,0% 0%,100% 0%,from (#2A8BBE),        color-stop (0.33, #AAD010), Color-stop ( 0.33, #FF7F00), to (#FE280E));

Here the "Color-stop" for the inflection point, visible:

Radial gradient

Next we introduce the radial gradient (radial), which is not a gradient from a point to a point, but a gradient from a circle to a circle. It is not a radial gradient, but a radially gradient. Take a look at an example:

Listing 15. Radial gradient (target circle radius is 0)

Backgroud:  -webkit-gradient (radial,50 50,50,50 50,0,from (Black), Color-stop (0.5,red), to (blue));

The front "50,50,50" is the center coordinate and radius of the starting circle, "50,50,0" Blue is the center coordinate and radius of the target circle, and "Color-stop (0.5,red)" is the position and color of the breakpoint. Here we need to explain, and the radiation from the inside to the outside, the radial gradient is just the opposite, is from the outside to the inside of the gradient. Listing 15 identifies two concentric circles with an outer radius of 50px and an inner circle radius of 0, which is a positive circular gradient from black to red to blue. Here is the effect of this piece of code:

Listing 16. Radial gradient (target circle radius not 0)

Backgroud:  -webkit-gradient (radial,50 50,50,50 50,10,from (Black), Color-stop (0.5,red), to (blue));

Here we give the target circle radius of 10 will have a radius of 10 ametis circle in the middle, this is the effect of setting the radius of the target circle.

Now I change again, no longer concentric circle, the inner Circle center to the right 20px offset.

Listing 17. Radial gradient (target Circle Center offset)

Backgroud:  -webkit-gradient (radial,50 50,50,70 50,10,from (Black), Color-stop (0.5,red), to (blue));

Here we give the target circle radius is still 10, but the center offset is "70,50" (The Starting Circle Center is "50,50")

Presumably you understand the principle, we can do a diffuse light from the top, similar to the lamp:

Listing 18. Radial gradient (diffuse light)

Backgroud:-webkit-gradient (radial,50 50,50,50 1,0,from (Black), to (white));

Viii. Shadow (Shadow) and reflection (Reflect) Effects of CSS3

First of all, the shadow effect, the shadow effect can be used for both ordinary elements, as well as text, refer to the following code:

Listing 19. Shadow of elements and text

. class1{  text-shadow:5px 2px 6px Rgba (up, up, up, 0.5);  }  . class2{  box-shadow:3px 3px 3px rgba (0, +, 0.3);  }

Settings are simple for text shading: Represents the X-axis direction of the shadow to the right 5px,y the direction of the shadow downward 2px, and the shadow blur radius of 6px, the color is RGBA (64, 64, 64, 0.5). Where the offset can be negative and the negative value is in the opposite direction. Element shadows are similar.

Listing 20. Reflection

. classreflect{  -webkit-box-reflect:below 10px  -webkit-gradient (linear, left top, left bottom, from ( Transparent), to       (RGBA (255, 255, 255, 0.51)));  }

setting is also very simple, we mainly focus on "-webkit-box-reflect:below 10px", he said reflected in the element below the 10px place, and then with the gradient effect.

Ix. background effect of CSS3

CSS3 has a few more attributes about the background (background), and here's a brief introduction:

First: "Background Clip", which determines the background painting area, has the following several possible properties:

* Background-clip:border-box; The background is displayed starting from border;

* Background-clip:padding-box; The background is displayed starting from padding;

* Background-clip:content-box; The background content area starts to show;

* BACKGROUND-CLIP:NO-CLIP; Default property, equivalent to Border-box;

In general, our background is all about covering the entire element, and now CSS3 lets you set whether you must do so. Here you can set the background color or the coverage of the picture.

Second: "Background Origin", used to determine the position of the background, which is commonly used in conjunction with background-position, you can calculate from border, padding, content Background-position (just like Background-clip).

* Background-origin:border-box; From border. Start calculating background-position;

* Background-origin:padding-box; From padding. Start calculating background-position;

* Background-origin:content-box; From content. Start calculating background-position;

Also, "Background size", used to adjust the size of the background image, do not mix with clip, this is mainly used to set the image itself. There are the following possible properties:

* Background-size:contain; Shrink the image to fit the element (maintain pixel aspect ratio)

* BACKGROUND-SIZE:COVER; Extend elements to fill elements (maintain pixel aspect ratio)

* background-size:100px 100px; Shrinks the image to the specified size.

* background-size:50% 100%; Shrinks the image to the specified size, and the percentage is relative to the dimension of the containing element.

Finally, in the "Background Break" attribute, CSS3, the element can be divided into several separate boxes (such as the inline element span spans multiple lines), and the Background-break property is used to control how the background is displayed in these different boxes.

* background-break:continuous; The default value. Ignoring the distance between boxes (that is, the element is not broken into multiple boxes, it is still a whole)

* Background-break:bounding-box; The distance between the boxes is counted;

* Background-break:each-box; Redraw the background individually for each box.

This property allows you to set the background properties of complex elements.

The most important point is that CSS3 supports multi-background images, which refer to the following code:

Listing 21. Multi-background images

div {  Background:url (src/zippy-plus.png) 10px center no-repeat,  URL (src/gray_lines_bg.png) 10px Center repeat-x;  }

This is a case of two backgrounds for the same element, one of which repeats and one is not duplicated. Refer to:

Ten, the box model of CSS3

The box model provides developers with a very flexible layout, but there are not many browsers that support this feature, currently only the new version of the WebKit kernel, Safari and chrome, and the new version of the Gecko kernel Firefox.

Let's take a look at how he works, and see the following code:

Listing 22. CSS3 Box Model

<div class= "Boxcontainer" >             <div class= "Item" >                 1             </div>             <div class= "Item" >                 2             </div>             <div class= "Item" >                 3             </div>             <div class= "Item Flex" >                 4             </div>         </div>

By default, if there are no special attributes in the "Boxcontainer" and "item" two classes, because the div is a block element, his arrangement should look like this:

Listing 23. CSS3 box Model (horizontal arrangement)

. boxcontainer {                 width:1000px;                 Display:-webkit-box;                 Display:-moz-box;                 -webkit-box-orient:horizontal;                 -moz-box-orient:horizontal;             }                         . Item {                 background: #357c96;                 Font-weight:bold;                 margin:2px;                 padding:20px;                 Color: #fff;                 Font-family:arial, Sans-serif;             }

Notice here the "display:-webkit-box; Display:-moz-box; ", which defines the box model for this element for WebKit and gecko browsers. Notice here that the "-webkit-box-orient:horizontal;", he represents the horizontal arrangement of the box model. The attentive reader will see that the right side of the box has come out a lot more, what's going on? Let's look at a more characteristic attribute: Flex

Listing 24. CSS3 box Model (FLEX)

<div class= "Boxcontainer" >             <div class= "Item" >                 1             </div>             <div class= "Item" >                 2             </div>             <div class= "Item" >                 3             </div>             <div class= "Item Flex" >                 4             </div>         </div>  Flex {      -webkit-box-flex:1;      -moz-box-flex:1;  }

Do you see the difference? In the fourth item element there is a flex attribute, and the fourth item element fills the entire area, which is what the Flex attribute does. If we adjust the attribute value of "Box-flex" and add more elements, see the following code:

Listing 25. CSS3 box Model (Flex Advanced)

<div class= "Boxcontainer" >             <div class= "Item" >                 1             </div>             <div class= "Item" >                 2             </div>             <div class= "Item Flex2" >                 3             </div>             <div class= "Item Flex" >                 4             </div>         </div>  Flex {      -webkit-box-flex:1;      -moz-box-flex:1;  }  . Flex2 {      -webkit-box-flex:2;      -moz-box-flex:2;  }

We add the second-to-last element (element 3) to the "Box-flex" attribute, and set its value to 2 element 3 and element 4 to the remaining area of the outer "container" in the form of a proportional "2:1", which is the advanced application of the "Box-flex" attribute.

Also, "box-direction" can be used to flip the sorting of these four boxes, "Box-ordinal-group" can be used to change the position of each box: the higher the value of a box's Box-ordinal-group property, the more it is in the back. The way the box is used can be set with "Box-align" and "Box-pack".

Xi. transitions of CSS3, Transforms and Animationtransitions

First of all, Transition,transition has the following specific properties:

Transition-property: Used to specify the nature of the transition, such as transition-property:backgrond, which means that backgound participates in the transition

Transition-duration: Used to specify the duration of this transition

Transition-delay: Used to set the time for a deferred transition

Transition-timing-function: For specifying transition type, with ease | Linear | ease-in | Ease-out | Ease-in-out | Cubic-bezier

You may feel that you can not touch the mind, in fact, it is very simple, we use an example to illustrate, see the following code:

Listing 26. CSS3 's Transition

<div id= "TransDiv" class= "Transstart" > Transition </div>  . transstart {     background-color:white;     -webkit-transition:background-color 0.3s linear;     -moz-transition:background-color 0.3s linear;     -o-transition:background-color 0.3s linear;     Transition:background-color 0.3s linear;  }  . transend {     background-color:red;  }

What he shows here is that the DIV with the id "TransDiv", when its initial "Background-color" attribute changes (modified by JavaScript), presents a change effect with a duration of 0.3 seconds and a uniform transform (linear). For example, the class attribute of the div is changed from "Transstart" to "Transend", and its background will be gradient from white to red.

Transform

Another look at Transform, in fact, refers to stretching, compression, rotation, offset and so on some of the basic transformation of graphics. See the following code:

Listing 27. CSS3 's Transform

. Skew {  -webkit-transform:skew (50deg);  }  . Scale {  -webkit-transform:scale (2, 0.5);  }  . Rotate {  -webkit-transform:rotate (30deg);  }  . Translate {  -webkit-transform:translate (50px, 50px);  }  . All_in_one_transform {  -webkit-transform:skew (20deg) Scale (1.1, 1.1) rotate (40deg) translate (10px, 15px);  }

"Skew" is tilted, "scale" is scaled, "rotate" is rotated, "translate" is panning. Finally, it needs to be explained that transform supports a comprehensive transformation. It can be seen as follows:

Figure 20. CSS3 's Transform

Now you should understand the role of Transform. Combined with the Transition we talked about earlier, the combination of the two will produce the same effects as rotation, scaling, and so on, which can definitely be refreshing.

Animation

Finally, let's talk about Animation. It can be said to open up a new era of CSS, so that css out of the "static" the conventional premise. Take WebKit as an example, see the following code:

Listing 28. CSS3 's Animation

@-webkit-keyframes anim1 {     0% {         opacity:0;  font-size:12px;     }     100% {         opacity:1;  font-size:24px;     }  }  . anim1div {     -webkit-animation-name:anim1;     -webkit-animation-duration:1.5s;     -webkit-animation-iteration-count:4;     -webkit-animation-direction:alternate;     -webkit-animation-timing-function:ease-in-out;  }

First, define the contents of the animation, as shown in Listing 28, and define the animation "ANIM1", changing from "Transparent" (opacity:0) to "opaque" (opacity:1), while the internal font size is changed from "12px" to "24px". Then, define the change parameters of the animation, where "duration" represents the animation duration, "Iteration-count" represents the number of animation repetitions, and direction indicates how the animation will change after it has been performed one time (for example, first right-to-left, The second time is from left to right), and finally, "timing-function" represents the pattern of change.

In fact, CSS3 animations support almost all style changes and can define a variety of animation effects to meet the needs of our user experience.

Here, we introduce the main new features of CSS3, which are basically supported in Chrome and Safari, and Firefox supports a few of them, IE and Opera support less. Readers can choose to use them according to the collective situation.

New properties of CSS3 and their usage