Scribd
Upload
42 views

CSS3

The document discusses various features of CSS3 including selectors, box model, backgrounds and borders, animations, and multiple column layout. It provides examples of how to use CSS3 properties to animate elements by changing styles over time through keyframe animations. CSS3 features like multiple columns allow splitting content into columns like a newspaper with control over number of columns and gaps between them.

Uploaded by

Shraddha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views

CSS3

The document discusses various features of CSS3 including selectors, box model, backgrounds and borders, animations, and multiple column layout. It provides examples of how to use CSS3 properties to animate elements by changing styles over time through keyframe animations. CSS3 features like multiple columns allow splitting content into columns like a newspaper with control over number of columns and gaps between them.

Uploaded by

Shraddha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 46

CSS3 is a cascading piece of paper that specifies concerning the data with a joined

hypertext markup language document display. it's considerably additional options


than previous CSS versions.

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

An Animation is such a property of CSS3, which is used to animate the object, without
using flash or any other animation application. With this feature of CSS3 You can
change the object into one style to another style in an animated way..

When the animation is created in the @keyframe, bind it to a selector, otherwise


the animation will have no effect.

Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

animationname Required. Defines the name of the animation.

keyframes-selector Required. Percentage of the animation duration.

Legal values:

0-100%

from (same as 0%)

to (same as 100%)

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

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.

<!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:green;}

to {background:yellow;}

@-webkit-keyframes myfirst /* Safari and Chrome */

from {background:green;}

to {background:yellow;}
}

</style>

</head>

<body>

<div></div>

</body>

</html>

===================================================

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

20% {background:red;}

25% {background:yellow;}

50% {background:blue;}

100% {background:green;}

</style>

</head>

<body>

<div></div>

</body>

</html>

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

<div></div>

</body>

</html>

The animation-duration property defines how many seconds or milliseconds an


animation takes to complete one cycle.

Syntax

animation-duration: time;
Value Description

time Specifies the length an animation takes to finish. Default value is 0, meaning
there will be no animation

<!DOCTYPE html>

<html>

<head>

<style>

div

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

@keyframes mymove

from {top:0px;}

to {top:200px;}

@-webkit-keyframes mymove /* Safari and Chrome */

from {top:0px;}

to {top:200px;}

}
</style>

</head>

<body>

<div></div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /* Safari and Chrome */

@keyframes mymove

0% {top:0px; background:red; width:100px;}


100% {top:200px; background:yellow; width:300px;}

@-webkit-keyframes mymove /* Safari and Chrome */

0% {top:0px; background:red; width:100px;}

100% {top:200px; background:yellow; width:300px;}

</style>

</head>

<body>

<div></div>

</body>

</html>

<!DOCTYPE html>

<html>

<style>

#animated_div

text-align:center;
width:60px;

height:40px;

background:#6699FF;

color:#ffffff;

position:relative;

font-weight:bold;

font-size:20px;

padding:10px;

animation:animated_div 5s infinite;

-moz-animation:animated_div 5s infinite;

-webkit-animation:animated_div 5s infinite;

border-radius:5px;

-webkit-border-radius:5px;

@keyframes animated_div

0% {left:0px;}

20% {left:50px; background-color: green;}

40% {left:140px; background-color: red;}

60% {left:280px; background-color: yellow;}

80% {left:425px; background-color: blue;}

100% {left:0px; background-color: pink;}

@-webkit-keyframes animated_div

0% {left:0px;}

20% {left:50px; background-color: green; margin-top:


50px;}
40% {left:140px; background-color: red;margin-top:
0px;}

60% {left:280px; background-color: yellow;margin-top:


50px;}

80% {left:425px; background-color: blue;margin-top:


0px;}

100% {left:0px; background-color: pink;}

@-moz-keyframes animated_div

0% {left:0px;}

20% {left:50px; background-color: green;}

40% {left:140px; background-color: red;}

60% {left:280px; background-color: yellow;}

80% {left:425px; background-color: blue;}

100% {left:0px; background-color: pink;}

</style>

<body>

<div id="animated_div">

CSS3

</div>

</body>

</html>
Multiple Columns:

A Multiple Columns is such an advance feature of CSS3 which is used for creating the
newspaper layout. You can create your articles to Multiple Columns, even if it is in one
paragraph.

The three properties of CSS3 Multiple Columns have been described as follows:

• column-count

• column-rule

• column-gap

column-count defines the number of columns,

 column-rule defines the line style between the columns and the

 column-gap defines the gap (blank spaces) between the columns.

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper

-moz-column-count:3; /* Firefox */

-webkit-column-count:4; /* Safari and Chrome */

column-count:3;

</style>

</head>

<body>

<div class="newspaper">

CNCWEBWORLD is one of the leading high end super specialization training


and placement organizations in Pune. CNCWEBWORLD has an initiative
taken by the company looking at the increasing demand for skilled
professionals in the market. With everyday new technology arising and
challenges adding up to individual´s career we are here to help and shape
the career and make our students market ready.

We take the challenge to help you begin your career with a boost as our
training faculty will help you to become ready for the IT career and face
the upcoming challenges of life. We have designed our curriculum as per
market working standards which helps you to gain professional knowledge
under the guidance of our professional faculties who have years of market
experience. We make you feel comfortable during your learning process at
our training centre. We believe in practical sessions which are fun and gets
you live experience of working environment.

</div>

</body>

</html>

<!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:150px; /* Safari and Chrome */

column-gap:40px;

</style>

</head>

<body>
<div class="newspaper">

CNCWEBWORLD is one of the leading high end super specialization training


and placement organizations in Pune. CNCWEBWORLD has an initiative
taken by the company looking at the increasing demand for skilled
professionals in the market. With everyday new technology arising and
challenges adding up to individual´s career we are here to help and shape
the career and make our students market ready.

We take the challenge to help you begin your career with a boost as our
training faculty will help you to become ready for the IT career and face
the upcoming challenges of life. We have designed our curriculum as per
market working standards which helps you to gain professional knowledge
under the guidance of our professional faculties who have years of market
experience. We make you feel comfortable during your learning process at
our training centre. We believe in practical sessions which are fun and gets
you live experience of working environment.

</div>

</body>

</html>

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

<div class="newspaper">

CNCWEBWORLD is one of the leading high end super specialization training


and placement organizations in Pune. CNCWEBWORLD has an initiative
taken by the company looking at the increasing demand for skilled
professionals in the market. With everyday new technology arising and
challenges adding up to individual´s career we are here to help and shape
the career and make our students market ready.

We take the challenge to help you begin your career with a boost as our
training faculty will help you to become ready for the IT career and face
the upcoming challenges of life. We have designed our curriculum as per
market working standards which helps you to gain professional knowledge
under the guidance of our professional faculties who have years of market
experience. We make you feel comfortable during your learning process at
our training centre. We believe in practical sessions which are fun and gets
you live experience of working environment.

</div>

</body>

</html>

The column-width property specifies the width of the columns.

<!DOCTYPE html>
<html>

<head>

<style>

.newspaper

column-width:100px;

-moz-column-width:100px; /* Firefox */

-webkit-column-width:300px; /* Safari and Chrome */

</style>

</head>

<body>

<div class="newspaper">

CNCWEBWORLD is one of the leading high end super specialization training


and placement organizations in Pune. CNCWEBWORLD has an initiative
taken by the company looking at the increasing demand for skilled
professionals in the market. With everyday new technology arising and
challenges adding up to individual´s career we are here to help and shape
the career and make our students market ready.

We take the challenge to help you begin your career with a boost as our
training faculty will help you to become ready for the IT career and face
the upcoming challenges of life. We have designed our curriculum as per
market working standards which helps you to gain professional knowledge
under the guidance of our professional faculties who have years of market
experience. We make you feel comfortable during your learning process at
our training centre. We believe in practical sessions which are fun and gets
you live experience of working environment.

</div>

</body>

</html>
The column-span property specifies how many columns an element should span
across

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper

column-count:3;

-moz-column-count:3; /* Firefox */

-webkit-column-count:3; /* Safari and Chrome */

h2

column-span:all;

-webkit-column-span:all; /* Safari and Chrome */

</style>

</head>

<body>

<div class="newspaper">

<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>

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. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum. Typi non habent claritatem insitam; est usus
legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt
lectores legere me lius quod ii legunt saepius.

</div>

</body>

</html>

The column-rule-width property specifies the width of the rule between columns.

<!DOCTYPE html>

<html>

<head>

<style>

.newspaper

column-count:3;

column-gap:40px;

column-rule-style:outset;

column-rule-width:10px;

/* Firefox */

-moz-column-count:3;

-moz-column-gap:40px;

-moz-column-rule-style:outset;

-moz-column-rule-width:10px;

/* Safari and Chrome */


-webkit-column-count:3;

-webkit-column-gap:40px;

-webkit-column-rule-style:outset;

-webkit-column-rule-width:1px;

</style>

</head>

<body>

<div class="newspaper">

CNCWEBWORLD is one of the leading high end super specialization training


and placement organizations in Pune. CNCWEBWORLD has an initiative
taken by the company looking at the increasing demand for skilled
professionals in the market. With everyday new technology arising and
challenges adding up to individual´s career we are here to help and shape
the career and make our students market ready.

We take the challenge to help you begin your career with a boost as our
training faculty will help you to become ready for the IT career and face
the upcoming challenges of life. We have designed our curriculum as per
market working standards which helps you to gain professional knowledge
under the guidance of our professional faculties who have years of market
experience. We make you feel comfortable during your learning process at
our training centre. We believe in practical sessions which are fun and gets
you live experience of working environment.

</div>

</body>

</html>

<!DOCTYPE html>

<html>
<head>

<title>Title Name will go here</title>

<style>

#multiple_columns

text-align:justify;

column-count:3;

-webkit-column-count: 3;

-moz-column-count: 3;

column-rule: 2px solid #6AAFCF;

-webkit-column-rule: 2px solid #6AAFCF;

-moz-column-rule: 2px solid #6AAFCF;

column-gap: 40px;

-webkit-column-gap: 40px;

-moz-column-gap: 40px;

</style>

</head>

<body>

<div id="multiple_columns">

CNCWEBWORLD is one of the leading high end super


specialization training and placement organizations in Pune.
CNCWEBWORLD has an initiative taken by the company looking at the
increasing demand for skilled professionals in the market. With everyday
new technology arising and challenges adding up to individual´s career we
are here to help and shape the career and make our students market
ready.

We take the challenge to help you begin your career with a boost as our
training faculty will help you to become ready for the IT career and face
the upcoming challenges of life. We have designed our curriculum as per
market working standards which helps you to gain professional knowledge
under the guidance of our professional faculties who have years of market
experience. We make you feel comfortable during your learning process at
our training centre. We believe in practical sessions which are fun and gets
you live experience of working environment.

The quick brown fox jumps over a right lazy dog.

The quick brown fox jumps over a right lazy dog.

</div>

</body>

</html>

Text Effects:

A CSS3 Text Effect is a such term which is used to implement some extra features
on normal text. CSS3 Text Effect is used to extend the text features for viewing and
layout purpose.

Their are mainly two properties of CSS3 Text Effects, which have been described as
follows:

• text-shadow

• word-wrap

text-shadow is used to create the shadow around the text, We can change the
shadow color

 word-wrap is used to break the continued text in another line.

<!DOCTYPE html>

<html>
<head>

<style>

h1

text-shadow: 10px 10px 7px green;

</style>

</head>

<body>

<h1>Welcome</h1>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

.test

width:11em;

border:1px solid #000000;

word-wrap:break-word;

</style>
</head>

<body>

<p class="test"> To set unparalleled standards of career-oriented IT


education and molding high quality man power pool for all levels of India
´s fastest growing industry.</p>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Title Name will go here</title>

<style>

#text_shadow

text-shadow: 20px 20px 10px #6AAFCF;

#word_wrap

word-wrap:break-word;

width:150px;
border:1px solid #ff0000;

#no_wrap

width:150px;

border:1px solid #ff0000;

</style>

</head>

<body>

<div id="text_shadow"><h1>Text Shadow</h1></div>

<div>Below is example of Word-Wrap. </div>

<div id="word_wrap">you can't break the line


hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.</div>

<p>Without using word-wrap text will go like this.</p>

<div id="no_wrap">you can't break the line


hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee.</div>

</body>

</html>
Fonts:

A CSS3 Font is an advance feature of CSS3 which is used to improve the web


designing. With the help of CSS3 Fonts feature we can create different types of font
style.

The rule for defining the Fonts is only We have to declare a name in the first line of
starting css properties. The font file can found in ttf(True type font) format or
otf(Open type font) format.

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

font-family-:Defines a name for the font

src-:Defines the URL of the font file

<!DOCTYPE html>

<html>

<head>

<style>

@font-face

font-family: myFont;

src: url(sansation_light.woff);

@font-face

font-family: myFont;

src: url(sansation_bold.woff);

font-weight:bold;

div
{

font-family:myFont;

</style>

</head>

<body>

<div>

It is our policy to provide quality services on a best effort basis to

satisfy the stated and implied needs of our students.

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

@font-face

font-family: myFont;

src: url(sansation_light.woff);

@font-face

{
font-family: myFont;

src: url(sansation_bold.woff);

font-weight:bold;

div

font-family:myFont;

</style>

</head>

<body>

<div>

It is our policy to provide quality services on a best effort basis to


<b>satisfy</b> the stated and implied needs of our students.

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Title Name will go here</title>

<link href='http://fonts.googleapis.com/css?
family=Cherry+Cream+Soda|Ropa+Sans|Butcherman|Rochester|
Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

<style>
.font1

font-family: 'Cherry Cream Soda', cursive;

font-size: 14px;

color: yellow;

line-height: 1.3em;

.font2

font-family: 'Ropa Sans', sans-serif;

font-size: 14px;

color: green;

line-height: 1.3em;

.font3

font-family: 'Butcherman', cursive;

font-size: 14px;

color: red;

line-height: 1.3em;

.font4

font-family: 'Rochester', cursive;

font-size: 14px;

color: blue;
line-height: 1.3em;

.font5

font-family: 'Open Sans Condensed', sans-serif;

font-size: 14px;

color: pink;

line-height: 1.3em;

</style>

</head>

<body>

<p class="font1">THIS LINE IS CONTAINING THE DIFFERENT


FONT</p>

<p class="font2">THIS LINE IS CONTAINING THE DIFFERENT


FONT</p>

<p class="font3">THIS LINE IS CONTAINING THE DIFFERENT


FONT</p>

<p class="font4">THIS LINE IS CONTAINING THE DIFFERENT


FONT</p>

<p class="font5">THIS LINE IS CONTAINING THE DIFFERENT


FONT</p>

</body>

</html>
Transition Effects:

A CSS3 Transition Effect is a such an effect that lets an element gradually change from
one style to another style. CSS3 Transition Effect is best suited for animation uses. But
still a lot can be done without using the animation. A user interface is necessary to
see the effects of transition. The all major browser support the CSS3 Transition Effects.

There are mainly four properties of CSS3 Transition Effects, which has been
described as follows:

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

transition-property is used to define about the css3 properties, on which the


properties should be applied or not. The following Syntax can be found can
be used to define the property.

transition-property: all;

transition-property: none;

transition-property: background-color;

transition-property: background-color, height, width;

 transition-duration is used to define the time of corresponding transitions to


take effect. The time can be set in seconds/milliseconds.

transition-duration: 2s;

transition-duration: 1000ms;

transition-duration: 1000ms, 2000ms

transition-timing-function is used to define the style of transition take effect


over its transition-duration. This can be done using the predefined function or
can be done using a customized cubic process.

transition-timing-function: ease;

transition-timing-function: ease-in;

transition-timing-function: ease-in-out;

transition-timing-function: ease, linear;


transition-timing-function: cubic-bezier(1.000, 0.835, 0.000, 0.945);

transition-delay is used to determine the time duration between transition


start and it finishing. Negative values are also acceptable in transition-delay.

transition-delay: 2s;

transition-delay: 1000ms, 2000ms;

transition-delay: -2s;

<!DOCTYPE html>

<html>

<head>

<style>

div

width:100px;

height:100px;

background:gray;

transition:width 6s;

-webkit-transition:width 6s; /* Safari */

div:hover

width:500px;

</style>

</head>

<body>
<div></div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div

width:100px;

height:100px;

background:gray;

transition:width 2s, height 2s, transform 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>

<div>welcome</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div

width:100px;

height:100px;

background:gray;

transition-property:width;

transition-duration:1s;

transition-timing-function:linear;

transition-delay:3s;

/* Safari */

-webkit-transition-property:width;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:3s;

}
div:hover

width:300px;

</style>

</head>

<body>

<div></div>

</body>

</html>

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


transition effect.

Syntax

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

linear Specifies a transition effect with the same speed from start to end
(equivalent to cubic-bezier(0,0,1,1))

ease Specifies a transition effect with a slow start, then fast, then end
slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))

ease-in Specifies a transition effect with a slow start (equivalent to


cubic-bezier(0.42,0,1,1))

ease-out Specifies a transition effect with a slow end (equivalent to cubic-


bezier(0,0,0.58,1))

ease-in-out Specifies a transition effect with a slow start and end (equivalent
to cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function.
Possible values are numeric values from 0 to 1

<!DOCTYPE html>

<html>

<head>

<style>

div

width:100px;

height:100px;

background:gray;

transition:width 2s;

transition-timing-function:ease;

/* Safari */

-webkit-transition:width 2s;

-webkit-transition-timing-function:ease;

div:hover

width:300px;

</style>

</head>

<body>

<div></div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div

width:100px;

height:100px;

background:gray;

transition-property:width;

transition-duration:5s;

/* Safari */

-webkit-transition-property:width;

-webkit-transition-duration:10s;

div:hover

width:300px;

</style>

</head>

<body>
<div></div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Title Name will go here</title>

<style>

div.swapnil

width: 20px;

height: 20px;

margin: 20px auto;

div.swapnil div.raja img

width: 20px;
height: 20px;

color: #fff;

padding: 10px;

border-radius: 5px;

margin-left: 0;

-webkit-transition: 3s linear;

-moz-transition: 3s linear;

-o-transition: 3s linear;

-ms-transition: 3s linear;

transition: 3s linear;

div.swapnil:hover div.raja img

width: 240px;

height: 220px;

-webkit-transform:rotate(360deg);

-moz-transform:rotate(360deg);

-o-transform:rotate(360deg);

-ms-transform:rotate(360deg);

transform:rotate(360deg);

</style>

</head>

<body>

<p>Hover on object to see it in action</p>


<div class="swapnil">

<div class="raja">

<img src="index.jpg" width="20" height="20"/>

</div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Title Name will go here</title>

<style>

#example

position:relative;

width:530px;

height:530px;

margin:0 auto 10px;

padding:10px;

}
.childbox

font-size:12px;

position:relative;

width:60px;

height:60px;

margin-bottom:10px;

background-color:#ccc;

.childbox p

text-align:center;

padding-top:10px;

#ease.childbox

-webkit-transition: all 4s ease;

-moz-transition: all 4s ease;

-o-transition: all 4s ease;

transition: all 4s ease;

border:1px solid #ff0000;

#ease_in.childbox

-webkit-transition: all 4s ease-in;


-moz-transition: all 4s ease-in;

-o-transition: all 4s ease-in;

transition: all 4s ease-in;

border:1px solid #00ffff;

#ease_out.childbox

-webkit-transition: all 4s ease-out;

-moz-transition: all 4s ease-out;

-o-transition: all 4s ease-out;

transition: all 4s ease-out;

border:1px solid #f5f5f5;

#ease_in_out.childbox

-webkit-transition: all 4s ease-in-out;

-moz-transition: all 4s ease-in-out;

-o-transition: all 4s ease-in-out;

transition: all 4s ease-in-out;

border:1px solid #f209f3;

#linear.childbox

-webkit-transition: all 4s linear;

-moz-transition: all 4s linear;

-o-transition: all 4s linear;


transition: all 4s linear;

border:1px solid #ddddff;

#custom.childbox

-webkit-transition: all 4s cubic-bezier(1.000,


0.835, 0.000, 0.945);

-moz-transition: all 4s cubic-bezier(1.000,


0.835, 0.000, 0.945);

-o-transition: all 4s cubic-bezier(1.000, 0.835,


0.000, 0.945);

transition: all 4s cubic-bezier(1.000, 0.835,


0.000, 0.945);

border:1px solid #cfdf44;

#negative.childbox

-webkit-transition: all 4s cubic-bezier(1.000,


-0.530, 0.405, 1.425);

-moz-transition: all 4s cubic-bezier(1.000,


-0.530, 0.405, 1.425);

-o-transition: all 4s cubic-bezier(1.000,


-0.530, 0.405, 1.425);

transition: all 4s cubic-bezier(1.000, -0.530,


0.405, 1.425);

border:1px solid #000;

#example:hover .childbox,
#example.hover_effect .childbox

{
-webkit-border-radius:30px;

-moz-border-radius:30px;

border-radius:30px;

-webkit-transform: rotate(720deg);

-moz-transform: rotate(720deg);

-o-transform: rotate(720deg);

-ms-transform: rotate(720deg);

transform: rotate(720deg);

margin-left:420px;

background-color:#fff;

</style>

</head>

<body>

<p>Hover on object to see it in action</p>

<div id="example">

<div id="ease" class="childbox"><p>CSS3</p></div>

<div id="ease_in"
class="childbox"><p>CSS3</p></div>

<div id="ease_out"
class="childbox"><p>CSS3</p></div>

<div id="ease_in_out"
class="childbox"><p>CSS3</p></div>

<div id="linear"
class="childbox"><p>CSS3</p></div>

<div id="custom"
class="childbox"><p>CSS3</p></div>

<div id="negative"
class="childbox"><p>CSS3</p></div>
</div>

</body>

</html>

Borders:

A CSS3 Border is such an affords of style sheet which reduces the human efforts
of Photoshop and other graphical applications. An individual can create
the rounded borders, border shadow,imaged based border and etc.

• border-radius

• box-shadow

• border-image

border-radius is a such property of CSS3 by which we can create the rounded


corners.

box-shadow is a such property of CSS3 by which we can create the shadow


of the border.

border-image is a such property of CSS3 by which we can create the


customized border, as we can put our own image as a border.

<!DOCTYPE html>

<html>

<head>

<style>

div

border:5px solid red;

padding:10px 40px;

background:gray;
width:300px;

border-radius:10px;

</style>

</head>

<body>

<div>CSS is an acronym for Cascading Style Sheets, a web-based


markup language used to describe the

look and formatting of a website to the browser.</div>

</body>

</html>

border-image property you can use an image to create a border,

round- the image is tiled (repeated) to fill the area

stretch-the image is stretched to fill the area.

<!DOCTYPE html>

<html>

<head>

<style>

div

border:15px solid transparent;

width:250px;
padding:10px 20px;

#round

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


*/

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

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

#stretch

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


*/

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

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

</style>

</head>

<body>

<div id="round">CSS is an acronym for Cascading Style Sheets, a


web-based markup language

used to describe the look and formatting of a website to the


browser.</div>

<br>

<div id="stretch">CSS is an acronym for Cascading Style Sheets, a


web-based markup language used to describe the look and
formatting
of a website to the browser..</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

div

width:300px;

height:100px;

background-color:gray;

box-shadow: 10px 10px 5px red;

</style>

</head>

<body>

<div></div>

</body>

</html

You might also like