CSS3 for Web Design Part-1

This article is brief introdution about the basic CSS3 propertices and please note that CSS3 is under development. Now a days most popular browsers supports CSS3 except Internet Explorer lower versions, Use it and avoid images for round corners and shadow effects.

 Live Demo

About Author

Ravi Tamada
Designer Developer & Freelance
Chennai, INDIA

 
Email  : ravi8x[at]gmail.com

facebook

twitter

The Vendor Specific Prefixes:

The vendor specific prefixes are placed before a css property which indicates work-in-progress and the prefix is specific to the browser vendor.
Each browser has their own prefix where other browsers will ignore them as they don’t recognize them.

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>

This property will take four parameters...Live Demo

X-offset
Y-offset
Blur
Color ( for shadow )