CSS-3 Introduction

CSS3 Modules

CSS3 has been split into "modules". It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules are added.
Some of the most important CSS3 modules are:

Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS3 Recommendation

Most of the CSS3 Modules are W3C Recommendations, and CSS3 properties are implemented in all modern browsers.

CSS3 Borders

With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.
In this chapter you will learn about the following border properties:

border-radius
box-shadow
border-image

CSS3 The border-radius Property - Rounded Corners

Adding rounded corners in CSS2 was tricky. We had to use different images for each corner.
In CSS3, creating rounded corners is easy.
In CSS3, the border-radius property is used to create rounded corners

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 2px solid #a1a1a1;

padding: 10px 40px;

background: #dddddd;

width: 300px;

border-radius: 25px;

}

</style>

</head>

<body>

<div>The border-radius property allows you to add rounded corners to elements.</div>

</body>

</html>

CSS3 The box-shadow Property

In CSS3, the box-shadow property is used to add shadow to boxes:

Example

Add a box-shadow to a <div> element:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

CSS3 The border-image Property

With the CSS3 border-image property you can use an image to create a border:

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 15px solid transparent;

width: 250px;

padding: 10px 20px;

}

#round {

-webkit-border-image: url(border.png) 30 30 round; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 30 round; /* Opera 11-12.1 */

border-image: url(border.png) 30 30 round;

}

#stretch {

-webkit-border-image: url(border.png) 30 30 stretch; /* Safari 3.1-5 */

-o-border-image: url(border.png) 30 30 stretch; /* Opera 11-12.1 */

border-image: url(border.png) 30 30 stretch;

}

</style>

</head>

<body>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

<p>The border-image property specifies an image to be used as a border.</p>

<div id="round">Here, the image is tiled (repeated) to fill the area.</div>

<br>

<div id="stretch">Here, the image is stretched to fill the area.</div>

<p>Here is the image that is used:</p>

</body>

</html>

CSS3 Backgrounds

CSS3 contains several new background properties,
which allow greater control of the background element.
In this chapter you will learn about the following background properties:

background-size
background-origin

You will also learn how to use multiple background images.

CSS3 The background-size Property

<!DOCTYPE html>

<html>

<head>

<style>

body {

background: url(img_flwr.gif);

background-size: 80px 60px;

background-repeat: no-repeat;

padding-top: 40px;

}

</style>

</head>

<body>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</p>

<p>Original image: <img src="img_flwr.gif" alt="Flowers" width="224" height="162"></p>

</body>

</html>

Another Example

<!DOCTYPE html>

<html>

<head>

<style>

div {

background: url(img_flwr.gif);

background-size: 100% 100%;

background-repeat: no-repeat;

}

</style>

</head>

<body>

<div>

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

</div>

</body>

</html>

CSS3 The background-origin Property

The background-origin property specifies the positioning area of the background images.
The background image can be placed within the content-box, padding-box, or border-box area.

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 35px;

background-image: url('smiley.gif');

background-repeat: no-repeat;

background-position: left;

}

#div1 {

background-origin: border-box;

}

#div2 {

background-origin: content-box;

}

</style>

</head>

<body>

<p>background-origin:border-box:</p>

<div id="div1">

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

</div>

<p>background-origin:content-box:</p>

<div id="div2">

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

</div>

</body>

</html>

CSS3 Multiple Background Images

<!DOCTYPE html>

<html>

<head>

<style>

body {

background: url(img_tree.gif), url(img_flwr.gif);

background-size: 100% 100%;

background-repeat: no-repeat;

}

</style>

</head>

<body>

<p>

<p>Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

</p>

</body>

</html>

CSS3 Gradients

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)

CSS3 Linear Gradients

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.

Syntax

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (this is default)
The following example shows a linear gradient that starts at the top. It starts red, transitioning to blue:

Example

A linear gradient from top to bottom:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */

background: linear-gradient(red, blue); /* Standard syntax (must be last) */

}

</style>

</head>

<body>

<h3>Linear Gradient - Top to Bottom</h3>

<p>This linear gradient starts at the top. It starts red, transitioning to blue:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Linear Gradient - Left to Right
The following example shows a linear gradient that starts from the left. It starts red, transitioning to blue:

Example

A linear gradient from left to right:

<!DOCTYPE html>

<html>

<head>

<style>

#grad1 {

height: 200px;

background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */

background: linear-gradient(to right, red , blue); /* Standard syntax (must be last) */

}

</style>

</head>

<body>

<h3>Linear Gradient - Left to Right</h3>

<p>This linear gradient starts at the left. It starts red, transitioning to blue:</p>

<div id="grad1"></div>

<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>

</body>

</html>

Linear Gradient - Diagonal
You can make a gradient diagonally by specifying both the horizontal and vertical starting positions.
The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to blue:
Example
A linear gradient that starts at top left (and goes to bottom right):
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to blue:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Using Angles

If you want more control over the direction of the gradient, you can define an angle, instead of the predefined directions (to bottom, to top, to right, to left, to bottom right, etc.).

Syntax

background: linear-gradient(angle, color-stop1, color-stop2);
The angle is specified as an angle between a horizontal line and the gradient line, going counter-clockwise. In other words, 0deg creates a bottom to top gradient, while 90deg generates a left to right gradient.
The following example shows how to use angles on linear gradients:

Example

A linear gradient with a specified angle:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(0deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(0deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, red, blue); /* Standard syntax (must be last) */
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(90deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, red, blue); /* Standard syntax (must be last) */
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax (must be last) */
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradients - Using Different Angles</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Using Multiple Color Stops

The following example shows how to set multiple color stops:

Example

A linear gradient from top to bottom with multiple color stops:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red, green, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax (must be last) */
}
#grad2 {
height: 200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
#grad3 {
height: 200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to 15 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>3 Color Stops (evenly spaced)</h3>
<div id="grad1"></div>
<h3>7 Color Stops (evenly spaced)</h3>
<div id="grad2"></div>
<h3>3 Color Stops (not evenly spaced)</h3>
<div id="grad3"></div>
<p><strong>Note:</strong> Color stops are automatically spaced evenly when no percents are specified.</p>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
The following example shows how to create a linear gradient with the color of the rainbow and some text:

Example

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Gradient Background
</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Using Transparency

CSS3 gradients also support transparency, which can be used to create fading effects.
To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color red:

Example

A linear gradient from left to right, with transparency:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Transparency</h3>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Repeating a linear-gradient

The repeating-linear-gradient() function is used to repeat linear gradients:
<!DOCTYPE html>

<html>

<head>
<style>
#grad1 {
height: 200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Safari 5.1 to 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Firefox 3.6 to 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Repeating Linear Gradient</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

CSS3 Radial Gradients

A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Example of Radial Gradient:

Syntax

background: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Radial Gradient - Evenly Spaced Color Stops (this is default)

Example

A radial gradient with evenly spaced color stops:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Radial Gradient - Differently Spaced Color Stops

Example

A radial gradient with differently spaced color stops:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6 to 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}
#grad2 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Shapes</h3>
<p><strong>Ellipse (this is default):</strong></p>
<div id="grad1"></div>
<p><strong>Circle:</strong></p>
<div id="grad2"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

closest-side
farthest-side
closest-corner
farthest-corner

Example

A radial gradient with different size keywords:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}

#grad2 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad3 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(closest-corner at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad4 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradients - Use of different size keywords</h3>
<p><strong>closest-side:</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side:</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner:</strong></p>
<div id="grad3"></div>
<p><strong>farthest-corner (this is default):</strong></p>
<div id="grad4"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Repeating a radial-gradient

The repeating-radial-gradient() function is used to repeat radial gradients:

Example

A repeating radial gradient:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari 5.1 to 6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.6 to 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Firefox 3.6 to 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Repeating Radial Gradient</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

CSS3 Text Effects

CSS3 contains several new text features.
In this chapter you will learn about the following text properties:

text-shadow
word-wrap

CSS3 Text Shadow

In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

Example

Add a shadow to a <h1> element:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
<p><b>Note:</b> Internet Explorer 9 and earlier versions, does not support the text-shadow property.</p>
</body>
</html>

CSS3 Word Wrapping

In CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word

Example

Allow long words to be able to break and wrap onto the next line:
<!DOCTYPE html>
<html>
<head>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
</body>
</html>

CSS3 Web Fonts - The @font-face Rule

Web fonts allow Web designers to use fonts that are not installed on the user's computer.
When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your "own" fonts are defined within the CSS3 @font-face rule.

Different Font Formats

TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Using The Font You Want

In the CSS3 @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>
</body>
</html>

Using Bold Text

You must add another @font-face rule containing descriptors for bold text:

<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>
<p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>
</body>
</html>
The file "sansation_bold.woff" is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.
This way you can have many @font-face rules for the same font.

CSS3 Transforms

With CSS3 transform, we can move, scale, turn, spin, and stretch elements.
A transformation is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.

CSS3 2D Transforms
In this chapter you will learn about the 2d transform methods:

translate()
rotate()
scale()
skew()
matrix()

You will learn about 3D transforms in the next chapter.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>

The translate() Method

With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */
transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.
With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
The value rotate(30deg) rotates the element clockwise 30 degrees.

The scale() Method

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
margin: 100px;
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
transform: scale(2,4); /* Standard syntax */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
The value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.

The skew() Method

Example

The matrix() Method

The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

Example

How to rotate a div element 30 degrees, using the matrix method:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */
transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Standard syntax */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

CSS3 3D Transforms

CSS3 allows you to format your elements using 3D transforms.
In this chapter you will learn about some of the 3D transform methods:

rotateX()
rotateY()

Click on the elements below, to see the difference between a 2D transform and a 3D transform:

The rotateX() Method

With the rotateX() method, the element rotates around its X-axis at a given degree.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
-webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */
transform: rotateX(120deg); /* Standard syntax */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX method.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

The rotateY() Method

With the rotateY() method, the element rotates around its Y-axis at a given degree.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
div#div2 {
-webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */
transform: rotateY(130deg); /* Standard syntax */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateY method.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash or JavaScript.
Mouse over the element below
What Are CSS3 Transitions?
CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:

the CSS property you want to add an effect to
the duration of the effect

Example

Add a transition effect on the width property, with a duration of 2 seconds:
div {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
The transition effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Example

Specify :hover for <div> elements:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>

Note: When the cursor mouse out of the element, it gradually changes back to its original style.

Multiple Changes

To add transition effects for more than one CSS property, separate the properties with a comma:

Example

Add transition effects on width, height, and transformation:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div>Hover over me to see the transition effect!</div>
</body>
</html>

More Transition Examples

The example below uses all the four transition properties:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
/* Standard syntax */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
div:hover {
width: 200px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
<p><b>Note:</b> The transition effect will wait 2 seconds before starting.</p>
</body>
</html>
The same transition effects as the example above. However, here we are using the shorthand transition property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s linear 2s;
}
div:hover {
width: 200px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
<p><b>Note:</b> The transition effect will wait 2 seconds before starting.</p>
</body>
</html>

CSS3 Animations

CSS3 animations can replace animations created by Flash and JavaScript in existing web pages.

CSS3 @keyframes Rule

The @keyframes rule is where the animation is created.
Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

CSS3 Animation

When an animation is created in the @keyframe rule, you must bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector (element) by specifying at least these two properties:

the name of the animation
the duration of the animation

Example

Bind the "myfirst" animation to the <div> element. Animation duration: 5 seconds:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Note: If the duration part is not specified, the animation will have no effect, because the default value is 0.

What Are CSS3 Animations?

An animation lets an element gradually change from one style to another.
You can change as many properties you want, as many times you want.
You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% and 100%).
0% represents the start of the animation, 100% is when the animation is complete.

Example

Change the background color when the animation is 25%, and 50%, and again when the animation is 100% complete:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
<div></div>
</body>
</html>

Example

Change the background color and the position when the animation is 25%, 50%, 75%, and again when the animation is 100% complete:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>

More Animation Examples

The example below uses seven of the animation properties:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
/* Chrome, Safari, Opera */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
The same animation effect as the example above (except the animation-play-state property). However, here we are using the shorthand animation property:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
animation: myfirst 5s linear 2s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>

CSS3 Multiple Columns

With CSS3, you can create multiple columns for laying out text - like in newspapers!
In this chapter you will learn about the following multiple column properties:

column-count
column-gap
column-rule

CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into:

Example

Divide the text in a <div> element into three columns:
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-count property.</p>
<div class="newspaper">

</div>
</body>
</html>

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns:
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-gap property.</p>
<div class="newspaper">

</div>
</body>
</html>

CSS3 Column Rules

The column-rule property sets the width, style, and color of the rule between columns.
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px outset #ff00ff; /* Firefox */
column-rule: 4px outset #ff00ff;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9, and earlier versions, does not support the column-rule property.</p>
<div class="newspaper">
Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications..
</div>
</body>
</html>

CSS3 User Interface

In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.
In this chapter you will learn about the following user interface properties:

resize
box-sizing
outline-offset

CSS3 Resizing

In CSS3, the resize property specifies whether or not an element should be resizable by the user.
The CSS code is as follows:

Example

Specify that a <div> element should be resizable by the user:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 10px 40px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer and Opera do not support the resize property.</p>
<div>The resize property specifies whether or not an element is resizable by the user.</div>
</body>
</html>

CSS3 Box Sizing

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Should they include the border-box or just the content-box which is the default value of the width and height properties.

For example, if you want two bordered boxes side by side, it can be achieved through setting box-sizing to "border-box". This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.

Example

Specify two bordered boxes side by side:
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 30em;
border: 1em solid;
}
div.box
{
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box;
width: 50%;
border: 1em solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>
</body>
</html>

CSS3 Outline Offset

The outline-offset property offsets an outline, and draws it beyond the border edge.
Outlines differ from borders in two ways:

Outlines do not take up space
Outlines may be non-rectangular

The CSS code is as follows:

Example

Specify an outline 15px outside the border edge:
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 20px;
width: 150px;
padding: 10px;
height: 70px;
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
<div>This div has an outline border 15px outside the border edge.</div>
</body>

</html>

Online Academy

Pages

Popular Posts

Wednesday, January 14, 2015

CSS 3 Tutorial

CSS-3 Introduction

CSS3 Modules

CSS3 Recommendation

CSS3 Borders

CSS3 The border-radius Property - Rounded Corners

CSS3 The box-shadow Property

Example

CSS3 The border-image Property

CSS3 Backgrounds

CSS3 The background-size Property

CSS3 The background-origin Property

CSS3 Multiple Background Images

CSS3 Gradients

CSS3 Linear Gradients

Syntax

Example

Example

Using Angles

Syntax

Example

Using Multiple Color Stops

Example

Example

Using Transparency

Example

Repeating a linear-gradient

CSS3 Radial Gradients

Syntax

Example

Example

Set Shape

Use of Different Size Keywords

Example

Repeating a radial-gradient

Example

CSS3 Text Effects

CSS3 Text Shadow

Example

CSS3 Word Wrapping

Example

CSS3 Web Fonts - The @font-face Rule

Different Font Formats

Using The Font You Want

Using Bold Text

CSS3 Transforms

Example

The translate() Method

Example

The scale() Method

Example

The skew() Method

Example

The matrix() Method

Example

CSS3 3D Transforms

The rotateX() Method

Example

The rotateY() Method

CSS3 Transitions

Example

Example

Multiple Changes

Example

More Transition Examples

CSS3 Animations

CSS3 @keyframes Rule

CSS3 Animation

Example

What Are CSS3 Animations?

Example

Example

More Animation Examples

CSS3 Multiple Columns

CSS3 Create Multiple Columns

Example