CSS3 new Features List

Source: Internet
Author: User
Tags transparent color
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:


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


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



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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.