CSS 3 TUTORIAL

Some of the most important CSS3 modules are:

CSS3 Rounded Corners

CSS3 border-radius Property

With CSS3, you can give any element "rounded corners", by using the border-radius property.

Here are three examples:

1. Rounded corners for an element with a specified background color:

Rounded corners!

2. Rounded corners for an element with a border:

Rounded corners!

3. Rounded corners for an element with a background image:

Rounded corners!

Here is the code:

Example

#rcorners1 {
   
 border-radius: 25px;
   
 background: #8AC007;
   
 padding: 20px; 
   
 width: 200px;
   
 height: 150px; 
}

#rcorners2 {
   
 border-radius: 25px;
   
 border: 2px solid #8AC007;
   
 padding: 20px; 
   
 width: 200px;
   
 height: 150px; 
}

#rcorners3 {
   
 border-radius: 25px;
   
 background: url(paper.gif);
   
 background-position: left top;
   
 background-repeat: repeat;
   
 padding: 20px; 
   
 width: 200px;
   
 height: 150px; 
}



Tip: The border-radius property is actually a shorthand property for the border-top-left-radius,border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

#rcorners1 {

border-radius: 25px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}



#rcorners2 {

border-radius: 25px;

border: 2px solid #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}



#rcorners3 {

border-radius: 25px;

background: url(paper.gif);

background-position: left top;

background-repeat: repeat;

padding: 20px;

width: 200px;

height: 150px;

}

</style>

</head>

<body>



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

<p>Rounded corners for an element with a specified background color:</p>

<p id="rcorners1">Rounded corners!</p>

<p>Rounded corners for an element with a border:</p>

<p id="rcorners2">Rounded corners!</p>

<p>Rounded corners for an element with a background image:</p>

<p id="rcorners3">Rounded corners!</p>



</body>

</html>



CSS3 Rounded Corners Properties

Property

Description

border-radius

A shorthand property for setting all the four border-*-*-radius properties

border-top-left-radius

Defines the shape of the border of the top-left corner

border-top-right-radius

Defines the shape of the border of the top-right corner

border-bottom-right-radius

Defines the shape of the border of the bottom-right corner

border-bottom-left-radius

Defines the shape of the border of the bottom-left corner



CSS3 Border Images

CSS3 border-image Property

The CSS3 border-image property allows you to specify an image to be used instead of the normal border around an element.

The property has three parts:

  1. The image to use as the border

  2. Where to slice the image

  3. Define whether the middle sections should be repeated or stretched

We will use the following image (called "border.png"):

The border-image property takes the image and slices it into nine sections, like a tic-tac-toe board. It then places the corners at the corners, and the middle sections are repeated or stretched as you specify.

Note: For border-image to work, the element also needs the border property set!

Here, the middle sections of the image are repeated to create the border:

An image as a border!

Here is the code:

Example

#borderimg {
   
 border: 10px solid transparent;
   
 padding: 15px;
   
 -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
   
 -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
   
 border-image: url(border.png) 30 round;
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

#borderimg {

border: 10px solid transparent;

padding: 15px;

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

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

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

}

</style>

</head>

<body>



<p>The border-image property specifies an image to be used as the border around an element:</p>

<p id="borderimg">Here, the middle sections of the image are repeated to create the border.</p>



<p>Here is the original image:</p><img src="border.png">

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



</body>

</html>



OUTPUT:



CSS3 Backgrounds

CSS3 Backgrounds

CSS3 contains a few new background properties, which allow greater control of the background element.

In this chapter you will learn how to add multiple background images to one element.

You will also learn about the following new CSS3 properties:

CSS3 Multiple Backgrounds

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.

The following example has two background images, the first image is a flower (aligned to the bottom and right) and the second image is a paper background (aligned to the top-left corner):

Example

#example1 {
   
 background-image: url(img_flwr.gif), url(paper.gif);
   
 background-position: right bottom, left top;
   
 background-repeat: no-repeat, repeat;
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

#example1 {

background-image: url(img_flwr.gif), url(paper.gif);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

padding: 15px;

}

</style>

</head>

<body>



<div id="example1">

<h1>Lorem Ipsum Dolor</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

</div>



</body>

</html>



OUTPUT:



CSS3 Colors

CSS supports color names, hexadecimal and RGB colors.

In addition, CSS3 also introduces:

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

#p1 {background-color:rgba(255,0,0,0.3);}

#p2 {background-color:rgba(0,255,0,0.3);}

#p3 {background-color:rgba(0,0,255,0.3);}

#p4 {background-color:rgba(192,192,192,0.3);}

#p5 {background-color:rgba(255,255,0,0.3);}

#p6 {background-color:rgba(255,0,255,0.3);}

</style>

</head>

<body>



<p>RGBA colors:</p>

<p id="p1">Red</p>

<p id="p2">Green</p>

<p id="p3">Blue</p>

<p id="p4">Grey</p>

<p id="p5">Yellow</p>

<p id="p6">Cerise</p>



</body>

</html>



OUTPUT:



CSS3 Shadow Effects

CSS3 Shadow Effects

With CSS3 you can add shadow to text and to elements.

In this chapter you will learn about the following properties:

CSS3 Text Shadow

The CSS3 text-shadow property applies shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

Text shadow effect!

Example

h1 {
   
 text-shadow: 2px 2px;
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px;

}

</style>

</head>

<body>



<h1>Text-shadow effect!</h1>



<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>



</body>

</html>



OUTPUT:

Next, add a color to the shadow:

Text shadow effect!

Example

h1 {
   
 text-shadow: 2px 2px red;
}

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px red;

}

</style>

</head>

<body>



<h1>Text-shadow effect!</h1>



<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>



</body>

</html>



OUTPUT:

Then, add a blur effect to the shadow:

Text shadow effect!

Example

h1 {
   
 text-shadow: 2px 2px 5px red;
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-shadow: 2px 2px 5px red;

}

</style>

</head>

<body>



<h1>Text-shadow effect!</h1>



<p><b>Note:</b> Internet Explorer 9 and earlier versions, do not support the text-shadow property.</p>



</body>

</html>



OUTPUT:

CSS3 box-shadow Property

The CSS3 box-shadow property applies shadow to elements.

In its simplest use, you only specify the horizontal shadow and the vertical shadow:

This is a yellow <div> element with a black box-shadow

Example

div {
   
 box-shadow: 10px 10px;
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

padding: 15px;

background-color: yellow;

box-shadow: 10px 10px;

}

</style>

</head>

<body>



<div>This is a div element with a box-shadow</div>



</body>

</html>

OUTPUT:



CSS3 Text

CSS3 contains several new text features.

In this chapter you will learn about the following text properties:

CSS3 Text Properties

The following table lists the new CSS3 text properties:

Property

Description

text-align-last

Specifies how to align the last line of a text

text-emphasis

A shorthand for setting text-emphasis-style and text-emphasis-color in one declaration

text-justify

Specifies how justified text should be aligned and spaced

text-overflow

Specifies how overflowed content that is not displayed should be signaled to the user

word-break

Specifies line breaking rules for non-CJK scripts

word-wrap

Allows long words to be able to be broken and wrap onto the next line



CSS3 Text Overflow

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

It can be clipped:

This is some long text that will not fit in the box

or it can be rendered as an ellipsis (...):

This is some long text that will not fit in the box

The CSS code is as follows:

Example

p.test1 {
   
 white-space: nowrap; 
   
 width: 200px; 
   
 border: 1px solid #000000;
   
 overflow: hidden;
   
 text-overflow: clip; 
}

p.test2 {
   
 white-space: nowrap; 
   
 width: 200px; 
   
 border: 1px solid #000000;
   
 overflow: hidden;
   
 text-overflow: ellipsis; 
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

p.test1 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: clip;

}



p.test2 {

white-space: nowrap;

width: 200px;

border: 1px solid #000000;

overflow: hidden;

text-overflow: ellipsis;

}

</style>

</head>

<body>



<p>The following two paragraphs contains a long text that will not fit in the box.</p>



<p>text-overflow: clip:</p>

<p class="test1">This is some long text that will not fit in the box</p>



<p>text-overflow: ellipsis:</p>

<p class="test2">This is some long text that will not fit in the box</p>



</body>

</html>



OUTPUT:



CSS3 Word Wrapping

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

If a word is too long to fit within an area, it expands outside:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

The word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

The CSS code is as follows:

Example

Allow long words to be able to be broken and wrap onto the next line:

p {
   
 word-wrap: break-word;
}



EXAMPLE PROGRAM:

<!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>



OUTPUT:



CSS3 Word Breaking

The CSS3 word-break property specifies line breaking rules.

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

The CSS code is as follows:

Example

p.test1 {
   
 word-break: keep-all;
}

p.test2 {
   
 word-break: break-all;
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

p.test1 {

width: 140px;

border: 1px solid #000000;

word-break: keep-all;

}



p.test2 {

width: 140px;

border: 1px solid #000000;

word-break: break-all;

}

</style>

</head>

<body>



<p class="test1">This paragraph contains some text. This line will-break-at-hyphens.</p>



<p class="test2">This paragraph contains some text. The lines will break at any character.</p>



<p><b>Note:</b> The word-break property is not supported in Opera 12 and earlier versions.</p>



</body>

</html>



OUTPUT:



CSS3 Transforms

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.

Mouse over the elements below to see the difference between a 2D and a 3D transformation:



CSS3 2D Transforms

In this chapter you will learn about the following 2D transformation methods:

The translate() Method

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position:

Example

div {
   
 -ms-transform: translate(50px,100px); /* IE 9 */
   
-webkit-transform: translate(50px,100px); /* Safari */
   
 transform: translate(50px,100px);
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

-ms-transform: translate(50px,100px); /* IE 9 */

-webkit-transform: translate(50px,100px); /* Safari */

transform: translate(50px,100px); /* Standard syntax */

}



</style>

</head>

<body>



<div>

The translate() method moves an element from its current position. This div element is moved 50 pixels to the right, and 100 pixels down from its current position.

</div>



</body>

</html>

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

The following example rotates the <div> element clockwise with 20 degrees:

Example

div {
   
 -ms-transform: rotate(20deg); /* IE 9 */
   
 -webkit-transform: rotate(20deg); /* Safari */
   
 transform: rotate(20deg);
}

Using negative values will rotate the element counter-clockwise.

The following example rotates the <div> element counter-clockwise with 20 degrees:

Example

div {
   
 -ms-transform: rotate(-20deg); /* IE 9 */
   
 -webkit-transform: rotate(-20deg); /* Safari */
   
 transform: rotate(-20deg);
}



The scale() Method

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

The following example increases the <div> element to be two times of its original width, and three times of its original height: 

Example

div {
   
 -ms-transform: scale(2,3); /* IE 9 */
   
 -webkit-transform: scale(2,3); /* Safari */
   
 transform: scale(2,3);
}



The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

The following example skews the <div> element 20 degrees along the X-axis:

Example

div {
   
 -ms-transform: skewX(20deg); /* IE 9 */
   
 -webkit-transform: skewX(20deg); /* Safari */
   
 transform: skewX(20deg);
}

The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.

The following example skews the <div> element 20 degrees along the Y-axis:

Example

div {
   
 -ms-transform: skewY(20deg); /* IE 9 */
   
 -webkit-transform: skewY(20deg); /* Safari */
   
 transform: skewY(20deg);
}

The skew() Method

The skew() method skews an element along the X and Y-axis by the given angles.

The following example skews the <div> element 20 degrees along the X-axis, and 10 degrees along the Y-axis:

Example

div {
   
 -ms-transform: skew(20deg, 10deg); /* IE 9 */
   
 -webkit-transform: skew(20deg, 10deg); /* Safari */
   
 transform: skew(20deg, 10deg);
}

If the second parameter is not specified, it has a zero value. So, the following example skews the <div> element 20 degrees along the X-axis:



The matrix() Method

The matrix() method combines all 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

div {
   
 -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
   
 -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
   
 transform: matrix(1, -0.3, 0, 1, 0, 0);
}



CSS3 3D Transforms

In this chapter you will learn about the following 3D transformation methods:

The rotateX() Method





The rotateX() method rotates an element around its X-axis at a given degree:

Example

div {
   
 -webkit-transform: rotateX(150deg); /* Safari */
   
 transform: rotateX(150deg);
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: yellow;

border: 1px solid black;

}



div#myDiv {

-webkit-transform: rotateX(150deg); /* Safari */

transform: rotateX(150deg); /* Standard syntax */

}



</style>

</head>

<body>



<div>

This a normal div element.

</div>



<div id="myDiv">

The rotateX() method rotates an element around its X-axis at a given degree. This div element is rotated 150 degrees.

</div>



<p><b>Note:</b> Internet Explorer 9 (and earlier versions) does not support the rotateX() method.</p>



</body>

</html>



OUTPUT:



The rotateY() Method





The rotateY() method rotates an element around its Y-axis at a given degree:

Example

div {
   
 -webkit-transform: rotateY(130deg); /* Safari */
   
 transform: rotateY(130deg);
}

The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree:

Example

div {
   
 -webkit-transform: rotateZ(90deg); /* Safari */
   
 transform: rotateZ(90deg);
}



CSS3 Transitions

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

Example: Mouse over the element below to see a CSS3 transition effect



How to Use CSS3 Transitions?

To create a transition effect, you must specify two things:

Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.

The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:

Example

div {
   
 width: 100px;
   
 height: 100px;
   
 background: red;
   
 -webkit-transition: width 2s; /* Safari */
   
 transition: width 2s;
}

The transition effect will start when the specified CSS property (width) changes value.

Now, let us specify a new value for the width property when a user mouses over the <div> element:

Example

div:hover {
   
 width: 300px;
}



EXAMPLE PROGRAM:

<!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>



OUTPUT:



What are CSS3 Animations?

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

You can change as many CSS properties you want, as many times you want.

To use CSS3 animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element. The animation will lasts for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":

Example

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
   
 width: 100px;
   
 height: 100px;
   
 background-color: red;
   
 animation-name: example;
   
 animation-duration: 4s;
}



EXAMPLE PROGRAM:

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background-color: red;

-webkit-animation-name: example; /* Chrome, Safari, Opera */

-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */

animation-name: example;

animation-duration: 4s;

}



/* Chrome, Safari, Opera */

@-webkit-keyframes example {

from {background-color: red;}

to {background-color: yellow;}

}



/* Standard syntax */

@keyframes example {

from {background-color: red;}

to {background-color: yellow;}

}

</style>

</head>

<body>



<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>



<div></div>



<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>



</body>

</html>



OUTPUT:

Note: If the animation-duration property is not specified, the animation will have no effect, because the default value is 0. 

In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many style changes as you like.

The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Example

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
   
 width: 100px;
   
 height: 100px;
   
 background-color: red;
   
 animation-name: example;
   
 animation-duration: 4s;
}



The following example will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Example

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
   
 width: 100px;
   
 height: 100px;
   
 position: relative;
   
 background-color: red;
   
 animation-name: example;
   
 animation-duration: 4s;
}



Delay an Animation

The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

Example

div {
   
 width: 100px;
   
 height: 100px;
   
 position: relative;
   
 background-color: red;
   
 animation-name: example;
   
 animation-duration: 4s;
   
 animation-delay: 2s;
}



Set How Many Times an Animation Should Run

The animation-iteration-count property specifies the number of times an animation should run.

The following example will run the animation 3 times before it stops:

Example

div {
   
 width: 100px;
   
 height: 100px;
   
 position: relative;
   
 background-color: red;
   
 animation-name: example;
   
 animation-duration: 4s;
   
 animation-iteration-count: 3;
}

The following example uses the value "infinite" to make the animation continue for ever:

Example

div {
   
 width: 100px;
   
 height: 100px;
   
 position: relative;
   
 background-color: red;
   
 animation-name: example;
   
 animation-duration: 4s;
   
 animation-iteration-count: infinite;
}