CSS3 for Web Design Part-1

CSS3 Border-radius:

The basic property in CSS3 spec is border-radius. This property will helps in rounding the corners of an element.

<style>
a.corners 
{
padding: 10px 15px;
background: #11a5ff;
font:bold 14px arial;
color: #fff;
text-decoration: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
}

a.corners:hover,a.corners:focus
{
background: #11a5ff;
}
</style>
<a class="corners" href="#">Download Me !</a>

CSS3 Transitions:
Transition properties allow CSS properties to change from one value to another by giving them a smooth animation over a period of time.Live Demo

<style>
a.transitions 
{
padding: 10px 15px;
background: #11a5ff;
font:bold 14px arial;
color: #fff;
text-decoration: none;

-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px; 

-webkit-transition-property: background;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-duration: ease;
-webkit-transition-delay: 0.3s;
}

a.transitions:hover,a.transitions:focus
{
background: #cc0000;
}
</style>
<a class="transitions" href="#">Download Me !</a>

Transition-property: The property to be changed
Transition-duration: How long a transition should last
Transition-timing-duration: How fast a transition will run over time 
Transition-delay: The time delay between transitions

Short-handed transitions:

We can also declare all transition properties using a short-handed property.

-webkit-transition : background 0.5s ease 0.3s;
-moz-transition : background 0.5s ease 0.3s;
-o-transition : background 0.5s ease 0.3s;
transition : background 0.5s ease 0.3s;


CSS3 Box-shadow:

<style>
.box_shadow
{
margin-top: 25px;
width: 300px;
height: 140px;
border: 1px solid #aeaeae;
-webkit-box-shadow: 2px 2px 3px #aeaeae;
-moz-box-shadow: 1px 1px 3px #aeaeae;
box-shadow: 1px 1px 3px #aeaeae;
}
</style>
//HTML Code
<div class="box_shadow"></div>