CSS3 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:

CSS3

CSS is used to control the style and layout of Web pages.

CSS3 is the latest standard for CSS.

CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.

CSS3 Modules

CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added.
Some of the most important CSS3 modules are:

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

CSS3 Recommendation

The CSS3 specification is still under development by W3C.
However, many of the new CSS3 properties have been implemented in 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

Browser Support

Property	Browser Support
border-radius
box-shadow
border-image

Internet Explorer 9+ supports border-radius and box-shadow.
Firefox, Chrome, and Safari supports all of the new border properties.
Note: Safari 5, and older versions, requires the prefix -webkit- for border-image.
Opera supports border-radius and box-shadow, but requires the prefix -o- for border-image.

CSS3 Rounded Corners

Example

Add rounded corners to a div element:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#eee;
width:300px;
border-radius:25px;
}
</style>
</head>
<body>

<div>Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech</div>

</body>
</html>

CSS3 Box Shadow

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:#ff0000;
box-shadow: 10px 10px 5px #333;
}
</style>
</head>
<body>

<div>Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech</div>

</body>
</html>

CSS3 Border Image

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

Example

Use an image to create a border around a div element:
<!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 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

#stretch
{
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>

<p> Internet Explorer does 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 used:</p>
<img src="border.png">

</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.

Example 1

Resize a background image:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(../images/bgimg.png);
background-size:80px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech
</p>

</body>
</html>

Example 2

Stretch the background image to completely fill the content area:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
background:url(../images/bgimg.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>

<div>
Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech
</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.

Example

Position the background image within the content-box:
<!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">
Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech
</div>

<p>background-origin:content-box:</p>
<div id="div2">
Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech
</div>

</body>
</html>

CSS3 Multiple Background Images

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('smiley.gif');}
</style>
</head>
<body>

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

Internet Explorer 10, Firefox, Chrome, Safari, and Opera support the text-shadow property.
All major browsers support the word-wrap property.
Note: Internet Explorer 9 and earlier versions, does not support the text-shadow property.

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 header:

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

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

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

New Text Properties

Property	Description	CSS
hanging-punctuation	Specifies whether a punctuation character may be placed outside the line box	3
punctuation-trim	Specifies whether a punctuation character should be trimmed	3
text-align-last	Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"	3
text-emphasis	Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text	3
text-justify	Specifies the justification method used when text-align is "justify"	3
text-outline	Specifies a text outline	3
text-overflow	Specifies what should happen when text overflows the containing element	3
text-shadow	Adds shadow to text	3
text-wrap	Specifies line breaking rules for text	3
word-break	Specifies line breaking rules for non-CJK scripts	3
word-wrap	Allows long, unbreakable words to be broken and wrap to the next line	3

The CSS3 @font-face Rule

Before CSS3, web designers had to use fonts that were already installed on the user's computer.
With CSS3, web designers can use whatever font he/she likes.
When you have found/bought the font you wish to use, include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your "own" fonts are defined in the CSS3 @font-face rule.

Using The Font You Want

In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

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

CSS3 Font Descriptors

The following table lists all the font descriptors that can be defined inside the @font-face rule:

Descriptor	Values	Description
font-family	name	Required. Defines a name for the font
src	URL	Required. Defines the URL of the font file
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default is "normal"
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default is "normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default is "normal"
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"

CSS3 Transforms

With CSS3 transform, we can move, scale, turn, spin, and stretch elements.

How Does it Work?

A transform is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.
Internet Explorer 10, Firefox, and Opera support the transform property.
Chrome and Safari requires the prefix -webkit-.
Note: Internet Explorer 9 requires the prefix -ms-.

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 */
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</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:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</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.

The rotate() Method

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
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</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):

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(2,4); /* Safari and Chrome */
}
</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

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</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 skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around the Y-axis.

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.

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-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); /* Safari and Chrome */
}
</style>
</head>
<body>

<div>Hello. This is a DIV element.</div>

<div id="div2">Hello. This is a DIV element.</div>

</body>
</html>

CSS3 Transform Properties

The following table lists all the transform properties:

Property	Description	CSS
transform	Applies a 2D or 3D transformation to an element	3
transform-origin	Allows you to change the position on transformed elements	3

2D Transform Methods

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n)	Defines a 2D translation, moving the element along the X-axis
translateY(n)	Defines a 2D translation, moving the element along the Y-axis
scale(x,y)	Defines a 2D scale transformation, changing the elements width and height
scaleX(n)	Defines a 2D scale transformation, changing the element's width
scaleY(n)	Defines a 2D scale transformation, changing the element's height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis

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:

Internet Explorer 10 and Firefox supports 3D transforms.
Chrome and Safari requires the prefix -webkit-.
Opera does not yet support 3D transforms (It supports 2D transforms only).

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
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera 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.

Example

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera 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 Transform Properties

The following table lists all the transform properties:

Property	Description	CSS
transform	Applies a 2D or 3D transformation to an element	3
transform-origin	Allows you to change the position on transformed elements	3
transform-style	Specifies how nested elements are rendered in 3D space	3
perspective	Specifies the perspective on how 3D elements are viewed	3
perspective-origin	Specifies the bottom position of 3D elements	3
backface-visibility	Defines whether or not an element should be visible when not facing the screen	3

3D Transform Methods

Function	Description
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z)	Defines a 3D translation
translateX(x)	Defines a 3D translation, using only the value for the X-axis
translateY(y)	Defines a 3D translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z)	Defines a 3D scale transformation
scaleX(x)	Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y)	Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle)	Defines a 3D rotation
rotateX(angle)	Defines a 3D rotation along the X-axis
rotateY(angle)	Defines a 3D rotation along the Y-axis
rotateZ(angle)	Defines a 3D rotation along the Z-axis
perspective(n)	Defines a perspective view for a 3D transformed element

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

Mouse over the element below:

Internet Explorer 10, Firefox, Chrome, and Opera supports the transition property.
Safari requires the prefix -webkit-.
Note: Internet Explorer 9, and earlier versions, does not support the transition property.
Note: Chrome 25, and earlier versions, requires the prefix -webkit-.

How does it work?

CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:

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

Example

Transition effect on the width property, duration: 2 seconds:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Note: If the duration is not specified, the transition will have no effect, because default value is 0.
The 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

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

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 a transitional effect for more than one style, add more properties, separated by commas:

Example

Add effects on the width, height, and the transformation:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s, height 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-webkit-transform:rotate(180deg); /* Safari */
}
</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>

CSS3 Transition Properties

The following table lists all the transition properties:

Property	Description	CSS
transition	A shorthand property for setting the four transition properties into a single property	3
transition-property	Specifies the name of the CSS property to which the transition is applied	3
transition-duration	Defines the length of time that a transition takes. Default 0	3
transition-timing-function	Describes how the speed during a transition will be calculated. Default "ease"	3
transition-delay	Defines when the transition will start. Default 0	3

The two examples below sets all transition properties:

Example

Use all transition properties in one example:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-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>

Example

The same transition effects as above, using the shorthand transition property:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 1s linear 2s;
/* Safari */
-webkit-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

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.

CSS3 @keyframes Rule

To create animations in CSS3, you will have to learn about the @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.

Browser Support

Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property.
Chrome and Safari requires the prefix -webkit-.
Note: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

Example

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

CSS3 animation

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:

Specify the name of the animation
Specify the duration of the animation

Example

Binding the "myfirst" animation to a div element, duration: 5 seconds:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
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: You must define the name and the duration of the animation. If duration is omitted, the animation will not run, because the default value is 0.

What are Animations in CSS3?

An animation is an effect that lets an element gradually change from one style to another.
You can change as many styles you want, as many times you want.
Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.
0% is the beginning of the animation, 100% is when the animation is complete.
For best browser support, you should always define both the 0% and the 100% selectors.

Example

Change the background color when the animation is 25%, 50%, and again when the animation is 100% complete:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
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 position:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

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

@-webkit-keyframes myfirst /* Safari and Chrome */
{
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 Animation Properties

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

Property	Description	CSS
@keyframes	Specifies the animation	3
animation	A shorthand property for all the the animation properties, except the animation-play-state property	3
animation-name	Specifies the name of the @keyframes animation	3
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0	3
animation-timing-function	Describes how the animation will progress over one cycle of its duration. Default "ease"	3
animation-delay	Specifies when the animation will start. Default 0	3
animation-iteration-count	Specifies the number of times an animation is played. Default 1	3
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"	3
animation-play-state	Specifies whether the animation is running or paused. Default "running"	3

The two examples below sets all the animation properties:

Example

Run an animation called myfirst, with all the animation properties set:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-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;
}

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

@-webkit-keyframes myfirst /* Safari and Chrome */
{
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>

Example

The same animation as above, using the shorthand animation property:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
}

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

@-webkit-keyframes myfirst /* Safari and Chrome */
{
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

Browser Support

Internet Explorer 10 and Opera supports multiple columns properties.
Firefox requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Note: Internet Explorer 9, and earlier versions, does not support the multiple columns properties.

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
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
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">
Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech.
</div>

</body>
</html>

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns:

Example

Specify a 40 pixels gap between the columns:

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
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">
Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech.
</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
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
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">
Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech.
</div>

</body>
</html>

CSS3 Multiple Columns Properties

Property	Description	CSS
column-count	Specifies the number of columns an element should be divided into	3
column-fill	Specifies how to fill columns	3
column-gap	Specifies the gap between the columns	3
column-rule	A shorthand property for setting all the column-rule-* properties	3
column-rule-color	Specifies the color of the rule between columns	3
column-rule-style	Specifies the style of the rule between columns	3
column-rule-width	Specifies the width of the rule between columns	3
column-span	Specifies how many columns an element should span across	3
column-width	Specifies the width of the columns	3
columns	A shorthand property for setting column-width and column-count	3

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

Browser Support

The resize property is supported in Firefox, Chrome, and Safari.
The box-sizing is supported in Internet Explorer, Chrome, Safari, and Opera. Firefox requires the prefix -moz-.
The outline-offset property is supported in all major browsers, except Internet Explorer.

CSS3 Resizing

In CSS3, the resize property specifies whether or not an element should be resizable by the user.

This div element is resizable by the user (in Firefox, Chrome, and Safari).

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>Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech.</div>

</body>
</html>

CSS3 Box Sizing

The box-sizing property allows you to define certain elements to fit an area in a certain way:

Example

Specify two bordered boxes side by side:

<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>

<div class="container">
<div class="box">Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech.</div>
<div class="box">Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech.</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

This div has an outline 15px outside the border edge.

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>Magicbraintech is a global leader in Training, technology and outsourcing solutions. We handle SMBs (small medium businesses).we have just less than Ten software Engineer at beginning State. We offer online services and support for web based projects. We start work in jan-2013.We also Provide Live Project Training for MCA, BCA, B-Tech, M-Tech.</div>

</body>
</html>

CSS3 User-interface Properties

Property	Description	CSS
appearance	Allows you to make an element look like a standard user interface element	3
box-sizing	Allows you to define certain elements to fit an area in a certain way	3
icon	Provides the author the ability to style an element with an iconic equivalent	3
nav-down	Specifies where to navigate when using the arrow-down navigation key	3
nav-index	Specifies the tabbing order for an element	3
nav-left	Specifies where to navigate when using the arrow-left navigation key	3
nav-right	Specifies where to navigate when using the arrow-right navigation key	3
nav-up	Specifies where to navigate when using the arrow-up navigation key	3
outline-offset	Offsets an outline, and draws it beyond the border edge	3
resize	Specifies whether or not an element is resizable by the user	3

You Have Learned CSS, Now What?

CSS Summary

This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once.
You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements.
You have learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links.
You have also learned about many of the new features in CSS3: rounded borders, box and text shadows, gradient backgrounds, 2D and 3D transformations, transitions, animations, multiple columns, and more.
To learn more about CSS, please take a look at our CSS examples and CSS reference.

Now You Know CSS, What's Next?

The next step is to learn JavaScript.
JavaScript
JavaScript is the most popular scripting language in the world.
JavaScript is the programming language of the web, for PCs, laptops, tablets and mobile phones.
JavaScript was designed to add interactivity to HTML pages.
Many HTML developers are not programmers, but JavaScript is a language with a very simple syntax. Almost anyone can put small "snippets" of JavaScript code into HTML pages.

Friday, September 6, 2013

CSS3 Introducation

CSS3 Rounded Corners

CSS3

CSS3 Modules

CSS3 Recommendation

CSS3 Borders

Browser Support

CSS3 Rounded Corners

Example

CSS3 Box Shadow

Example

CSS3 Border Image

Example

CSS3 Backgrounds

Example 1

Example 2

CSS3 The background-origin Property

Example

CSS3 Multiple Background Images

<!DOCTYPE html><html><head><style> body{background-image:url('smiley.gif');}</style></head><body></body></html>

CSS3 Text Effects

CSS3 Text Shadow

Example

CSS3 Word Wrapping

New Text Properties

The CSS3 @font-face Rule

Using The Font You Want

Using Bold Text

CSS3 Font Descriptors

CSS3 Transforms

How Does it Work?

2D Transforms

Example

The translate() Method

The rotate() Method

The scale() Method

The skew() Method

The matrix() Method

CSS3 Transform Properties

2D Transform Methods

3D Transforms

The rotateX() Method

Example

The rotateY() Method

Example

CSS3 Transform Properties

3D Transform Methods

CSS3 Transitions

How does it work?

Example

Example

Multiple changes

Example

CSS3 Transition Properties

Example

Example

CSS3 Animations

CSS3 @keyframes Rule

Browser Support

Example

CSS3 animation

Example

What are Animations in CSS3?

Example

Example

CSS3 Animation Properties

Example

Example

CSS3 Multiple Columns

Browser Support

CSS3 Create Multiple Columns

Example

CSS3 Specify the Gap Between Columns

Example

CSS3 Column Rules

CSS3 Multiple Columns Properties

CSS3 User Interface

Browser Support

CSS3 Resizing

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('smiley.gif');}
</style>
</head>
<body>

</body>
</html>