10 Top commands in CSS3

CSS3 must know in the 10 top commands, are some good implementation code, like friends can collect 1. Bezel fillet (Border radiuas)
This is commonly used in our common, before I use the P round angle, particularly special pain, whether it is to use CSS to draw rounded corners, or pictures to draw round corners are not so easy, but now good, in the CSS3, directly only need such as the following hungry code, you can make a beautiful round corner effect ~ ~ ~

The code is as follows:

#box1 {border:1px solid #699;/* for Mozilla Firefox */-moz-border-radius:20px;/* for Safari & Google Chrome */- webkit-border-radius:20px; }

Instance:

2. Box Shadow (Box Shadow)
is to allow a p to produce a shadow effect. The code is as follows:

The code is as follows:

#box1 {border:1px solid #699;-moz-box-shadow:5px-5px 5px #b6ebf7-webkit-box-shadow:5px-5px 5px #b6ebf7 width:10 0px; height:100px; margin-left:100px; margin-top:100px; Background-color:gray; Border-color:yellow; }

It is important to note that it has 4 parameters:

First parameter: The position of the horizontal offset, which has a positive or negative number. If it is positive, then the right side of the border is shaded, or if it is negative, the left box has a shadow effect.

Second parameter: The position of the vertical offset. It also has positive or negative numbers. If it is a positive number, then the bottom (bottom) border has a shadow, otherwise if it is negative, then its top (top) border has a shadow.

Third parameter: The size of a shadow

The fourth parameter: color, this is very well understood.

Instance:

Note that the second argument above, I use a negative number.
There is a box shadow, there is a property is Text-shadow, this is mainly used in the text above.
The code is as follows:

<p style= "Background-color: #535353; Color: #353535; font-family: Microsoft ya black; font-size:64px; padding:20px; Font-weight:bold; " > <span style= "text-shadow: -2px-2px 2px #0D0D0D, 0px 0px 5px #aaa;" >welcome to my Home!</span><span style= "text-shadow:2px 2px 2px #0D0D0D, 0px 0px 5px #aaa;" >welcome to my Home!</span><span style= "text-shadow:2px 2px 2px #000, 0px 0px 10px #fff, 0px 0px 20px #fff;" >welcome to my Home!</span><span style= "color:white; text-shadow:0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 40px #9dd; " >welcome to my home!</span> </p>

Instance:

It's cool!

3. Transparency (Transparency or RGBA)

The transparency of the set element has always been a tricky issue, with different browsers being used differently.

For example, I used to set the transparency as follows: " Note: This method is not recommended "

CSS transparency under Firefox, Safari, Chrome and Opera

#myElement { opacity: . 7;}

CSS transparency under IE

#myElement { filter: Alpha (OPACITY=40);}

The method syntax for IE8 CSS transparency is as follows

The code is as follows:

#myElement {filter:progid:DXImageTransform.Microsoft.Alpha (opacity=40);/* The first line is valid under IE6, IE7 and IE8 */-ms-filter: "ProgID :D XImageTransform.Microsoft.Alpha (opacity=40) "; /* The second line is only valid under IE8 */}

The transparency settings required for older versions of Firefox and Safari:

The code is as follows:

#myElement {-khtml-opacity:. 5;-moz-opacity:0.5;}

is not particularly special pit dad Ah! ~ ~.
Fortunately, we are now living in a perfect time, after CSS 3 comes out, a new noun is the property of transparency (transparency).
The code is as follows:

#box3 {Background-color:rgba (110, 142, 185,. 5);}

There are 4 parameters, the first 3 parameters particularly good understanding, is the RGB color (don't tell me, do not know what is called RGB color value, do not know the pull out to play fart), the most important thing is the fourth value. Its value is between 0 and 1, and the larger the value, the more opaque it is.

However, do not be happy too early, here or there is a special example, you may also think of Microsoft's ie. Microsoft always likes the whole thing that is different from other people, exhausted is our programmer.

IE understands the above statement, directly understood as the background color, but does not understand as RGBA. In order to ensure perfect compatibility in all browsers for our development, we need to fix the following:

The code is as follows:

#box3 {/* for all browsers */Background-color: #6e8eb9;} body:last-child #box3 {/* Exclude all IE browsers using:last -child */Background-color:rgba (142, 185,. 5)!important; }

:last-child 是伪选择器，在CSS2开始在css中使用选择器。IE 对这个是不认识，所以它不会执行它后面的代码。


As a result, the perfect compatibility is achieved above.

Instance:

4. Number of columns (Columns) layout
This means that the contents of the inside of the box can be divided into several columns.
First on the code:

The code is as follows:

#box1 {border:1px solid #699;/* for Mozilla Firefox */-moz-column-count:2;-moz-column-gap:20px;-moz-column-rule:1 PX Solid #6e8eb9; /* for Safari & Google Chrome */-webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #6e8eb9; margin-left:100px; margin-top:100px; Border-color:yellow; Background-color:gray; }

-moz-column-count: Represents the number of columns, such as 2, which means that 2 is divided into 2 columns.

-moz-column-rule: Represents the style of the middle split line.

Instance:

Above the first I layered 2 columns, and the second one I was divided into 3 columns.
There is the first-webkit-column-rule:3px solid #6e8eb9; I set it so that its dividing line is bold.

5. Display multiple background images
You can apply multiple background images to a tag element. The code is similar to the css2.0 version, but the reference picture needs to be separated by a comma. The first image is positioned on the topmost background of the element, followed by a background image that appears below it, as follows:

The code is as follows:

Background-image:url (top-image.jpg), url (middle-image.jpg), url (bottom-image.jpg);

The code is as follows:

border:1px solid #699; Background:url (/nature/bird1-thumb.png) no-repeat 0 0, url (/nature/apple.jpg) no-repeat 100% 0; border:1px solid #699; Padding:0 20px; margin-left:100px; margin-top:100px; Border-color:yellow; Background-color:gray; width:400px; height:300px;

Instance:

However, here is still not happy too early, and Microsoft that the child is nothing to do, and here to engage in a incompatibility, so you must not under the code, in order to be compatible with the browser:

The code is as follows:

#box5 blockquote {/* used in all browsers */Background:url (/i/quotel.gif) 0 0 no-repeat; padding:0 20px;} body:last-child #box5 bl ockquote{/* Used in browsers other than IE: Last-child */Background:url (/i/quotel.gif) no-repeat 0 0, url (/i/quoter.gif) no-repeat 100% 0 ; }

That's OK.
6. Contour (Outlines)
That is, the inside of the box is drawing a box.
The code is as follows:

#box1 {border:1px solid #000; outline:1px solid #699; Outline-offset: -20px; border:1px solid #699; padding:0 20px; M argin-left:100px; margin-top:100px; Border-color:yellow; Background-color:gray; width:400px; height:300px; }

The parameters are well understood: outline:1px solid #699; the picture frame;
Outline-offset this represents the offset inside, the popular point is the distance.
Instance:

7. Background gradient (Background gradients)
As the name implies, the gradient is the color slowly beginning to fade. In CSS3, the gradient effect is very, very flexible and easy to use.

However, one thing to note here is that the settings between Firfox and Chrome are not as simple as the above.

Firfox's Code:

Background:-moz-linear-gradient (bottom, #b6ebf7, #fff 50%);
Code for Chrome or safari:

Background:-webkit-gradient (linear, left bottom, left top,color-stop (0, #b6ebf7), Color-stop (0.80, #fff));
Parameter interpretation, such as in Firfox,

The first parameter: bottom represents the location of the application, bottom is at the top, of course, you can also have other places, such as left in the box on the right side of the square, and the top is on the front! ~

In Chrome, Color-stop: The values used to denote the start and end, and the color inside. The remaining parameters are the same as above.

Instance:

8. Rotation (Rotate)
Rotation, as the name implies is the angle of rotation elements, very good understanding.
Code:

The code is as follows:

#box1 {border:1px solid #000;-moz-transform:rotate (20deg);-webkit-transform:rotate (20deg); border:1px solid #699; p Adding:0 20px; margin-left:100px; margin-top:100px; Border-color:yellow; Background-color:gray; width:400px; height:300px; }

Rotate (angle) inside the array is the meaning of the angle, deg is the English word degree the abbreviation of the degree of meaning.
Instance:

Attention:
If it is negative, it will turn in the opposite direction.
If it is more than 360 degrees, then the remainder will be calculated with 360, for example, if you write rotate (380deg), then its value is equivalent to rotate (20deg).
9. Reflection (Reflect)
Reflection, in fact, is the reflection effect.
The code is as follows:

#myFont {-webkit-box-reflect:below 10px-webkit-gradient (linear, left top, left bottom, from (Transparent), to (Rgba (255, 255, 255, 0.51))); font-size:30px; }

Instance:

10. Conversion (Transitions) Note: The second content is from Zhangxinxu's blog. Thank him for his efforts.

The effect is: smoothing the value of the CSS changes . Whether it is a click event, focus event, or mouse hover, as long as the value changes, is smooth, is the animation. As a result, as long as a whole station of the general class, it can be very easy to gradually enhance the animation effect, super practical value of the said.
Transition has the following specific properties:
Transition-property:*//Specify the nature of the transition, such as transition-property:backgrond, which means that backgound participates in the transition
transition-duration:*//Specifies the duration of this transition
transition-delay:*//Delay transition time
transition-timing-function:*//specifying transition types, with ease | Linear | ease-in | Ease-out | Ease-in-out | Cubic-bezier
The above parameters are mainly used in the transition-timing-function. Indicates how fast or slow it is.
Code:

<p id= "Transbox" class= "Trans_box" > <p class= "trans_list ease" > ease</p> <p class= "trans_list ease _in "> Ease-in</p> <p class=" Trans_list ease_out "> ease-out</p> <p class=" Trans_list ease_in_ Out "> ease-in-out</p> <p class=" Trans_list linear "> Linear</p> </p>

CSS code:

The

Code is as follows:

<style type= "Text/css" >. trans_box {padding:20px; Background-color: #f0f3f9;}. trans_list {width:10%; height:6 4px; margin:10px 0; Background-color: #486AAA; Color: #fff; Text-align:center; }. Ease {-webkit-transition:all 4s ease;-moz-transition:all 4s ease;-o-transition:all 4s ease; transition:all 4s ea Se }. ease_in {-webkit-transition:all 4s ease-in;-moz-transition:all 4s ease-in;-o-transition:all 4s ease-in; transitio N:all 4s ease-in; }. ease_out {-webkit-transition:all 4s ease-out;-moz-transition:all 4s ease-out;-o-transition:all 4s ease-out; trans Ition:all 4s ease-out; }. ease_in_out {-webkit-transition:all 4s ease-in-out;-moz-transition:all 4s ease-in-out;-o-transition:all 4s ease-i N-out; Transition:all 4s ease-in-out; }. Linear {-webkit-transition:all 4s linear;-moz-transition:all 4s linear;-o-transition:all 4s linear; transition:a ll 4s linear; }. Trans_box:hover. trans_list,. Trans_box_hover. trans_list {margin-left:89%; backgrOund-color: #beceeb; Color: #333; -webkit-border-radius:25px; -moz-border-radius:25px; -o-border-radius:25px; border-radius:25px; -webkit-transform:rotate (360DEG); -moz-transform:rotate (360DEG); -o-transform:rotate (360DEG); Transform:rotate (360DEG); } </style>

The main effect of this implementation is to move from the left to the right! ~ ~. Depending on the parameters, the speed is different.

Instance: When initializing:

After the instance:

Maybe some friends are not familiar with this 5 function, so their speed

Finally, dedicate 2 useful graphs:

CSS Properties

CSS Selector

"Recommended"

1. CSS3 Free Video Tutorial

2. Share 22 help tools for H5 and CSS3

3. What is CSS3?

4. A detailed example of a selector in CSS3

5. A detailed description of the content attribute in CSS3