CSS3 Features

[wonderfan]

CSS3 allows you to create borders with rounded corners.

CSS3 also allows you to use an image as a border.

[wonderfan]

CSS3 allows you to add multiple background images for an element, through the background-image property.

The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

[wonderfan]

Multiple background images can be specified using either the individual background properties (as above) or the background shorthand property.

[wonderfan]

The CSS3 background-size property allows you to specify the size of background images.

Before CSS3, the size of a background image was the actual size of the image. CSS3 allows us to re-use background images in different contexts.

The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover.

[wonderfan]

The background-size property also accepts multiple values for background size (using a comma-separated list), when working with multiple backgrounds.

[wonderfan]

The requirements are as follows:

Fill the entire page with the image (no white space) Scale image as needed Center image on page Do not cause scrollbars

Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property

[wonderfan]

The CSS3 background-origin property specifies where the background image is positioned.

The background-origin property takes three different values:

border-box - the background image starts from the upper left corner of the border padding-box - (default) the background image starts from the upper left corner of the padding edge content-box - the background image starts from the upper left corner of the content

[wonderfan]

The CSS3 background-clip property specifies the painting area of the background.

The background-clip property takes three different values:

border-box - (default) the background is painted to the outside edge of the border padding-box - the background is painted to the outside edge of the padding content-box - the background is painted within the content box

[wonderfan]

to be continued: http://www.w3schools.com/css/css3_gradients.asp

[wonderfan]

CSS3 gradients let you display smooth transitions between two or more specified colors.

Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center)

[wonderfan]

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

[wonderfan]

CSS3 Text Shadow The CSS3 text-shadow property applies shadow to text.

[wonderfan]

The CSS3 box-shadow property applies shadow to elements.

[wonderfan]

The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

[wonderfan]

The CSS3 word-wrap property allows long words to be able to be broken and wrap onto the next line.

[wonderfan]

The CSS3 word-break property specifies line breaking rules.

[wonderfan]

Your "own" fonts are defined within the CSS3 @font-face rule.

[wonderfan]

CSS3 transforms allow you to translate, rotate, scale, and skew elements.

A transformation is an effect that lets an element change shape, size and position.

CSS3 supports 2D and 3D transformations.

[wonderfan]

the following 2D transformation methods:

translate() rotate() scale() skewX() skewY() matrix()

[wonderfan]

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

[wonderfan]

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end ease-in - specifies a transition effect with a slow start ease-out - specifies a transition effect with a slow end ease-in-out - specifies a transition effect with a slow start and end cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function The following example shows the some of the different speed curves that can be used:

[wonderfan]

An animation lets an element gradually change from one style to another.

[wonderfan]

The following table lists the @keyframes rule and all the animation properties:

Property Description @keyframes Specifies the animation code animation A shorthand property for setting all the animation properties (except animation-play-state and animation-fill-mode) animation-delay Specifies a delay for the start of an animation animation-direction Specifies whether an animation should play in reverse direction or alternate cycles animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle animation-fill-mode Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay) animation-iteration-count Specifies the number of times an animation should be played animation-name Specifies the name of the @keyframes animation animation-play-state Specifies whether the animation is running or paused animation-timing-function Specifies the speed curve of the animation

[wonderfan]

box-sizing Allows you to include the padding and border in an element's total width and height nav-down Specifies where to navigate when using the arrow-down navigation key nav-index Specifies the tabbing order for an element nav-left Specifies where to navigate when using the arrow-left navigation key nav-right Specifies where to navigate when using the arrow-right navigation key nav-up Specifies where to navigate when using the arrow-up navigation key outline-offset Adds space between an outline and the edge or border of an element resize Specifies whether or not an element is resizable by the user

[wonderfan]

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element height + padding + border = actual height of an element