The front-end must master several CSS3 attributes and master the CSS3 attributes.

The front-end must master several CSS3 attributes and master the CSS3 attributes.

With the popularity of Css3 and html5, more and more front-end personnel begin to learn about Css3. Today's article is to say that the front-end should master 10 Css3 attributes.

1. Border-radius

Border-radiusIs the most popular among many CSS3 attributes. border-radius is the highest-level Attribute in CSS3. When designers fear that a layer will be displayed in different ways between different browsers, CSS rounded corners, a very basic knowledge, will guide them to start learning. We have a great idea to provide an alternative viewing experience for mobile browsers. The strange thing is that when this method appears on a desktop browser, they do not think so. Border-radius is the most popular among many CSS3 attributes. border-radius is the highest-level Attribute in CSS3. When designers fear that a layer will be displayed in different ways between different browsers, CSS rounded corners, a very basic knowledge, will guide them to start learning. We have a great idea to provide an alternative viewing experience for mobile browsers. The strange thing is that when this method appears on a desktop browser, they do not think so.

-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;

Many readers may not realize that we can use this attribute to create a circle.

-moz-border-radius: 50px;-webkit-border-radius: 50px; border-radius: 50px;

 

2. Box-shadow

Next, B is very common.Ox-shadow, You can make your elements beautify immediately, just remember not to set the value too far.

 

 

-webkit-box-shadow: 1px 1px 3px #292929;-moz-box-shadow: 1px 1px 3px #292929;box-shadow: 1px 1px 3px #292929;

Four Parameters of box-shadow

Nowadays, many people don't know how to use multiple box-shadows at a time. This will produce some interesting results. In, I used blue and green shadows to enlarge the effect.

Box-shadow

-webkit-box-shadow: 1px 1px 3px green, -1px -1px blue;-moz-box-shadow: 1px 1px 3px green,-1px -1px blue;box-shadow: 1px 1px 3px green, -1px -1px blue;

Clever Shadows

<div>   </div>

The CSS 

.box:after {   content: '';   position: absolute;   z-index: -1; /* hide shadow behind image */   /* The Shadow */   -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);   -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);   -box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);                   width: 70%;   left: 15%; /* one half of the remaining 30% (see width above) */   height: 100px;   bottom:  0;}

3. Text-shadow

Text-shadowIs one of the several CSS attributes that we can omit the prefix. Similarly, box-shadow must be applied to text and have the same four parameters:

 h1 {    text-shadow: 0 1px 0 white;    color: #292929; }

Text-OutlineLike box-shadow, it can set multiple shadows to Use comma separators. For example, when Webkit does not support the stroke effect, we can use the following code to support more browsers (although not very beautiful ).

4. Text-Stroke

When using this method, you must note that only Webkit (Safari, Chrome, and iPhone) supports this attribute in the last few years. In fact, although I may be wrong, TExt-strokeNot part of CSS3. In this case, Firefox displays a blank page when a white font is used. To solve this problem, you can use Javascript or a text color different from the background color.

h1 {   -webkit-text-stroke: 3px black;   color: white;}

Feature DetectionHow can we provide firefox with a set of available styles and a set of Safari or Chrome? The solution is to perform more tests. Through feature detection, we can use JavaScript to test whether a property is available. If not, I need to use a backup. Return to the text-stroke issue and set an alternative black color for browsers that do not support this attribute (except webkit currently ).

var h1 = document.createElement('h1');if ( !( 'webkitTextStroke' in h1.style ) ) {   var heading = document.getElementsByTagName('h1')[0];   heading.style.color = 'black';}

First, we set an h1 element, and then run it to determine whether-webkit-text-stroke supports this element through style attributes. If not, the title is set from white to black.

5. Multiple Backgrounds

BackgroundThe attributes have been thoroughly reformed in the CSS3 style and began to support multi-background images. For a simple example, if there is no or an appropriate image, we will use the images of the two tutorials as our background. Of course, you may use textures in the program, the gradient may be used as an image.

.box {background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat;}

The preceding two background images are inserted using commas (,). The first is (0, 0), and the second is (100%, 0 ). Make sure that you use a backup image for an unsupported browser. Otherwise, it will skip this attribute to leave the background image blank. To compensate for the old browser, add a separate image for the old browser, such as ie7. Define background twice, old browser, and rewrite. Or you can view Modernizr again.

.box {/* fallback */background: url(image/path.jpg) no-repeat;/* modern browsers */background: url(image/path.jpg) 0 0 no-repeat, url(image2/path.jpg) 100% 0 no-repeat;}

6. background-size

At present, we can use this flexible method to redefine the size of the background image.

background: url(path/to/image.jpg) no-repeat;background-size: 100% 100%;

The above Code makes the background image occupy the entire available space. However, if we use a special image to occupy the whole space of the body element, no matter how wide the window is, what should we do?

body, html { height: 100%; }body { background: url(path/to/image.jpg) no-repeat; background-size: 100% 100%;}

That is, define the x and y parameters of background-size respectively. The latest versions of Chrome and Safari support this attribute, but we still need to use the old method to support the old browser.

body { background: url(path/to/image.jpg) no-repeat; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%;}

7. text-overflow

The browser initially developed the text overflow attribute to set two values: clip ellipsis. This attribute supports cutting the text in the container and also provides a ellipsis feature.

Text-overflow

. Box {

   -o-text-overflow: ellipsis;   text-overflow:ellipsis;   overflow:hidden;   white-space:nowrap;   border: 1px solid black;   width: 400px;   padding: 20px;   cursor: pointer;}

You may consider displaying all the text content as the mouse passes.

#box:hover {  white-space: normal;  color: rgba(0,0,0,1);  background: #e3e3e3;  border: 1px solid #666;}

This does not seem like resetting the text-overflow attribute or disabling it to take effect. In on: hover, we can make the normal attribute of white-space. Now it is normal. Do you know? You can also specify your own string to use the ellipsis. In this way, modify the text string to be displayed.

8. Flexible Box Model

The Flexible Box Model will eventually keep us away from float-like troubles. Although you want to change a new attribute for your header, once you do this, it will benefit for life. Create a simple two-column layout.

<div id="container"> <div id="main"> Main content here </div> <aside> Aside content here </aside></div>

First, we need to set a container, and then specify its width and height, even if there is no substantive content in it.

#container {    width: 960px;    height: 500px; /* just for demo */    background: #e3e3e3;    margin: auto;    display: -moz-box;    display: -webkit-box;    display: box;
}

Next, define the background color of # main and aside respectively.

# Main {

   background: yellow;}   aside {   background: red;} 

So far, we have not seen any effect.

Although we have set the display: box model, its sub-elements occupy the entire vertical space. This is its default box-align attribute stretch. Let's see what the results are. After we set the # main width.

#main {  background: yellow;  width: 800px;}

Flexible Box Model

However, we still have a question: why does aside not occupy all the remaining space? We can try it with the new property box-flex. Box-flex occupies the entire space.

aside {    display: block; /* cause is HTML5 element */    background: red;   /* take up all available space */    -moz-box-flex: 1;    -webkit-box-flex: 1;    box-flex: 1; }

After this attribute is used, no matter how wide the # main is, aside occupies the entire available space. At the same time, you do not have to worry about issues such as float, such as crowding out elements to the next line.

Flexible Box Model

I just want to give it a superficial explanation here. Please refer to Paul's excellent article in Ireland for details. However, when using this method, you should also pay attention to compatibility issues. For example, the old browser should first test and provide necessary remarks.

9. Resize

Only Firefox 4 and Safari 3 support this attribute. Resize is part of the CSS3 UI model and can be used to redefine the size of textarea.

<textarea name="elem" id="elem" rows="5" cols="50"></textarea>

By default, webkit and Firefox 4 support horizontal and vertical redefinition.

textarea {   -moz-resize: vertical;   -webkit-resize: vertical;   resize: vertical;}

Possible values:

None: redefinition is not supported.

10. Transition

Perhaps the most exciting addition to CSS3 is to produce animations without JavaScript elements. It seems that IE9 does not support this function, but it does not mean that you cannot use this function. The key is to improve your skills. Now, when the mouse slides over the link on the right, the text slides to the right.

The HTML 

<ul>   <li>      <a href="#"> Hover Over Me </a>   </li>   <li>      <a href="#"> Hover Over Me </a>   </li>   <li>      <a href="#"> Hover Over Me </a>   </li>   <li>      <a href="#"> Hover Over Me </a>   </li></ul>

The CSS

ul a {    -webkit-transition: padding .4s;    -moz-transition: padding .4s;    -o-transition: padding .4s;    transition: padding .4s; } a:hover {    padding-left: 6px; }

Transition has three parameters:

 

Why don't we apply transition directly to hover? This is because it takes effect only when mouseover is enabled. When mouseout is enabled, the element is immediately returned to its initial state. Because we have adjusted the effect, it will not affect the old browser. Next we will build a concise effect based on what we have learned in the article. You can learn by viewing the source code. I will not translate how to create it.