smartcoderszone – A Blog about Web Development Tutorials and Tips, PHP, Mysql, Javascript, CSS, Jquery, SEO, Twitter and Facebook Scripts

Hello Friends,

Today I want to share very interesting topic about css3. CSS3 offers some newly added property of radius and shadow, which makes object very beautiful and attractive.

You can make object (div) to your desired shape and give it look like any photoshop designed with css3 property.

Start with radius property -

/*  mozilla   */
 -moz-border-radius:100px;
 /*  safari and crome  */
 -webkit-border-radius: 100px;
 /*  css3 opera browser   */
 border-radius: 100px;

All browsers having their own syntax for its implementations. Firefox uses prefix -moz in radius property. With this radius property we can make circle shape. It will turn all four corners ( top left, top right, bottom right, bottom left ) of div to make it circle of radius 100.

We can write radius property this type as well -

-moz-border-radius:30px 50px;

Here 30px represents top left and bottom right and 50px represents top right and bottom left.

We can further explore radius property in this way -

/*  mozilla   */

 -moz-border-radius-topleft: 30px;
 -moz-border-radius-topright: 30px;
 -moz-border-radius-bottomleft: 30px;
 -moz-border-radius-bottomright: 30px;

 /*  safari n crome  */

 -webkit-border-top-left-radius : 30px;
 -webkit-border-top-right-radius : 30px;
 -webkit-border-bottom-left-radius : 30px;
 -webkit-border-bottom-right-radius : 30px;

 /*  css3 opera browser   */

 border-top-left-radius : 30px;
 border-top-right-radius : 30px;
 border-bottom-right-radius : 30px;
 border-bottom-left-radius : 30px;

There is little difference in syntax of browsers for this property.  You can see in above example.

Following are some examples of radius property with explanation.

CSS3 radius property example

CSS3 radius property example

CSS3 radius property example

Now we will understand wonderful shadow property -

Shadow property can be inset or outset. It is outset by default if not mentioned.

-moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.9);

First parameter represents inset shadow. Second specify horizontal shadow. Third shows vertical shadow. Fourth represents shadow blur. Fifth display shadow color.

Example of other browser syntax

-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;

Note that css3 used additional character in color “a”. This a stands for alpha property. This new feature allows us to specify an opacity value for a color. This one could make life for webdevelopers a lot easier.

You can simple put color also.

Following is example of shadow property  -

CSS3 Shadow Property Example

It is very simple and easy to use. Browser supporting css3 (Chrome 4+ or

Firefox 3.5+)  includes Firefox/Mozilla, Google Crome, Safari and Opera. IE8 and below still not supporting it.

You can see Demo of radius and shadow property here.

CSS3 Radius Demo

CSS3 Shadow Demo

You can download zip of all examples-

Download

Hope you will enjoy this new feature of css3. If you have any query regarding this let me know your feedback.