Explore CSS3 new Features

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.

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.

@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.

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:

Figure 1. No Break-word.

Figure 2. Have Break-word

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.

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:

Figure 4. Text-decoration

Text-fill-color: Text interior fill color

Text-stroke-color: Text Boundary fill Color

Text-stroke-width: Text Border width

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

Listing 9 of code 5:

Figure 5. Multi-column Layouts

Borders and colors (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;

See Fillet effect below:

Figure xxx. Requires a Heading

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. As follows:

Figure 6. Simple linear gradient

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

Figure 7. A variety of different linear gradients

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:

Figure 8. Complex linear gradients

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:

Figure 9. Radial gradient (target circle radius is 0)

If we give the target source a greater than 0 radius, you will see another effect:

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, as follows:

Figure 10. Radial gradient (target circle radius not 0)

As you can see, there will be a circle of ametis with a radius of 10 in the middle, which 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 or 10, but the center offset is "70,50" (The Starting Circle Center is "50,50") as follows:

Figure 11. Radial gradient (target Circle Center offset)

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));

The effect is as follows:

Figure 12. Radial gradient (diffuse light)

CSS3 Shadow (Shadow) and reflection (Reflect) effects

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. Refer to:

Figure 13. Shadow of elements and text

Next we'll talk about reflection, he looks like a reflection in the water, its settings are simple, refer to the following code:

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 10px below the place, and then with the gradient effect, can be seen as follows:

Figure 14. Reflection

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:

Figure 15. Multi-background images

CSS3 's Box model

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:

Figure 16. CSS3 Box Model

Below, we add the relevant CSS3 box model properties:

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. At this point, we will see the following effect:

Figure 17. CSS3 box Model (horizontal arrangement)

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," and refer to the following code:

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? A "Flex" attribute is added to the fourth "item element" to see how it works:

Figure 18. CSS3 box Model (FLEX)

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, which is visible as follows:

Figure 19. CSS3 box Model (Flex Advanced)

Thus, element 3 and element 4 fill the remaining area of the outer "container" in a proportional "2:1" manner, 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".

CSS3 's transitions, 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.

Conclusion

This paper introduces some content about CSS3 in WEB development, and gradually draws out the various related properties of CSS3. Based on the principle of each CSS3 attribute, this paper introduces the characteristics of the new features of each CSS3, how to use them and the places needing attention in the use of the actual source code. Following the code example for each new feature, the example diagram gives the Web developer a more intuitive visual perception. In Web2.0 's increasingly popular today, mastering and being able to use some of CSS3 's features will bring unprecedented user experience to our projects.

Explore CSS3 new Features