CSS3 new Features List

Contact CSS3 So long, always to use the time directly to use, but not a good sum summed up, it is here to comb it.

CSS3 border:

Rounded border:

Key: Border-radius

<! DOCTYPE html>

CSS3 Border Shadow:

Key: Box-shadow

Syntax: Object selector {box-shadow:[projection mode,] X-axis offset, y-offset [, shadow blur radius] [, shadow expansion radius] [, Shadow color]}

Projection mode: This parameter is optional. If no value is set, the default projection is an outer shadow, and if its unique value is "inset", its projection is an inner shadow;

X-offset: The shadow horizontal offset, whose value can be a positive or negative value. If the value is positive, the shadow is on the right side of the object and its value is negative, and the shadow is on the left side of the object;

Y-offset: The vertical offset of the shadow, which can also be a positive or negative value. If positive, the shadow is at the bottom of the object and its value is negative, and the shadow is at the top of the object;

Shadow Blur radius: This parameter is optional, but its value can only be positive, and if its value is 0 o'clock, indicates that the shadow does not have a blur effect, the greater the value of the shadow the more blurred the edge;

Shadow expansion radius: This parameter is optional, its value can be positive negative, if the value is positive, then the entire shadow is extended, the inverse value is negative, then zoom out;

Shadow color: This parameter is optional. If you do not set the color, the browser will take the default color, but the browser default color inconsistency, especially in the WebKit kernel under the Safari and chrome under the transparent color, under Firefox/opera Black (verified), it is recommended not to omit this parameter.



CSS3 Border Picture:

Key:-webkit-border-image

Like what:


P{border-image:url (border.png) Round;-moz-border-image:url (border.png) round;/* Firefox */- Webkit-border-image:url (border.png) round; /* Safari and Chrome */-o-border-image:url (border.png) round; /* Opera */}


CSS3 background:

Background-size property specifies the size of the background image


P{background:url (bg_flower.gif);-moz-background-size:63px 100px;/* old version of Firefox */background-size:63px 100px; Background-repeat:no-repeat;}

The Background-origin attribute specifies the location area of the background image.



P{background:url (bg_flower.gif); background-repeat:no-repeat;background-size:100% 100%;-webkit-background-origin : Content-box; /* Safari */background-origin:content-box;}

CSS3 Multiple background images


body{Background-image:url (bg_flower.gif), url (bg_flower_2.gif);}


CSS3 text effects

CSS3 Text Shadow


h1{text-shadow:5px 5px 5px #FF0000;}

CSS3 Automatic Line Wrapping


p {Word-wrap:break-word;}

In the new @font-face rule, you must first define the name of the font (such as Myfirstfont), and then point to the font file.

To use fonts for HTML elements, refer to the name of the font (Myfirstfont) through the Font-family property:


<style> @font-face{font-family:myfirstfont;src:url (' Sansation_light.ttf '),     url (' Sansation_light.eot ') ; /* ie9+ */}p{font-family:myfirstfont;} </style>


CSS3 2D Conversion

Pan: Translate


P{transform:translate (50px,100px);-ms-transform:translate (50px,100px);        /* IE 9 */-webkit-transform:translate (50px,100px);    /* Safari and Chrome */-o-transform:translate (50px,100px);        /* Opera */-moz-transform:translate (50px,100px);        /* Firefox */}

Rotation: Rotate


P{transform:rotate (30deg);-ms-transform:rotate (30deg);        /* IE 9 */-webkit-transform:rotate (30deg);    /* Safari and Chrome */-o-transform:rotate (30deg);        /* Opera */-moz-transform:rotate (30deg);        /* Firefox */}

Scaling: Scale

With the scale () method, the dimensions of the element are increased or decreased, depending on the given width (X-axis) and height (Y-axis) Parameters:


P{transform:scale (2,4);-ms-transform:scale (2,4);    /* IE 9 */-webkit-transform:scale (2,4);    /* Safari and Chrome */-o-transform:scale (2,4);    /* Opera */-moz-transform:scale (2,4);    /* Firefox */}

Folding: Skew

By the skew () method, the element flips the given angle, according to the given horizontal line (X axis) and vertical (Y-axis) Parameters:


P{transform:skew (30deg,20deg);-ms-transform:skew (30deg,20deg);    /* IE 9 */-webkit-transform:skew (30deg,20deg);    /* Safari and Chrome */-o-transform:skew (30deg,20deg);    /* Opera */-moz-transform:skew (30deg,20deg);    /* Firefox */}


CSS3 3d Conversion

Rotatex ()

Rotate along the x axis

Rotatey ()

Rotate along the y axis


CSS3 transition

With CSS3, we can add an effect to an element (a smooth transition) when the element is transformed from one style to another without using Flash animations or JavaScript.

To add a transition effect to width, height, and transformation:


p{transition:width 2s, height 2s, transform 2s;-moz-transition:width 2s, height 2s,-moz-transform 2s;-webkit-transition : width 2s, height 2s,-webkit-transform 2s;-o-transition:width 2s, height 2s,-o-transform 2s;}


Summarize:

Needs to be given a starting and ending State,

Then add transition to P: Wide transition time, high transition time, conversion transition time


transition:[wide transition time [, high transition Time] [, transition time]


CSS3 Animation

Set Action @keyframes


@keyframes myfirst{0%   {background:red; left:0px; top:0px;} 25%  {background:yellow; left:200px; top:0px;} 50%  {background:blue; left:200px; top:200px;} 75%  {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}

Set Action class


. myaction{Animation:myfirst 5s;}

Add the action class to P


$ ("..."). AddClass ('. myaction ');

Attention:

Grammar:


Animation:name Duration timing-function delay Iteration-count direction

Name: Names of @keyframes

Duration: Specifies the time, in seconds or milliseconds, that the animation will take to complete.

Timing-function: Specifies the speed curve of the animation.


 
 
 
  
 
   
 
    
The value of the Timing-function
 
    
Describe
 
   
 
   
 
    
Linear
 
    
Uniform
 
   
 
   
 
    
Ease
 
    
Slow speed
 
   
 
   
 
    
Ease-in
 
    
Slow start
 
   
 
   
 
    
Ease-out
 
    
Low end
 
   
 
   
 
    
Ease-in-out
 
    
Slow start and end
 
   
 
   
 
    
Cubic-bezier (N,n,n,n)
 
    
Its own value in the Cubic-bezier function, from 0 to 1
 
   
 
  
 

 







Delay: Latency before the animation starts, seconds.

Iteration-count: Specifies the number of times the animation plays: Specific values or infinite (unlimited).

Direction: Specifies whether to rotate the animation in reverse. Normal play, alternate rotate reverse play.


CSS3 Multiple columns:

Create multiple columns to lay out text


P{-moz-column-count:3;     /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}


CSS3 user Interface


p{border:2px solid;padding:10px 40px; width:300px;resize:both;overflow:auto;}


The new features of CSS3 have been combed here. Individuals feel that conversion and animation are key points that need to be mastered well.