CSS3 Basics

Hello Friends,
                     Today I am going to dicuss on the topic of CSS 3 Basics What new added in CSS in his version 3 so lets starts with properties

1. border-radius: Now in CSS 3 we can make a border radial at corners with the help of css 3 like see the example below:

-webkit-border-radius:40px 20px 20px 80px;

here           -webkit denotes that the css direct chrome,safari and other latest browsers
                  -moz-  denotes that the css direct mozilla firefox only 
 Default property work like
         border-radius: top_left_corner_radius    top_right_corner_radius bottom_left_corner_radius botto_right_corner
40px: denotes value of top left corner
20px denotes value of top right corner
20px denotes value of bottom left corner
80px denotes value of bottom right corner

See the example

second one is :

Box-shadow :  In box shadow we give the shadow around the box or div and in Text shadow we direct shadow around text of word


-webkit-box-shadow: 2px 4px 8px #e3e3e3;

2px: denotes the shadow at X-axis 
4px :denotes the shadow at Y-axis
8px: denotes the shadow at Z-axis
#e3e3e3 denotes the color of the shadow ;

see Example:

Gradients: Gradients are very nice in css3 we can make any type of background in which we use more than one color to make a background having color changing fractionally let us understand it with the help of example


background:-webkit-gradient(linear, left top , left bottom, from( #000000), to(#FFFFFF) );
background:-moz-linear-gradient(top, #000000 , #FFFFFF);
background:linear-gradient(top, #000000, #FFFFFF);

See Snapshot:

Remaining properties will be discuss in my new post till then Bye
hope you all like my post
if you have any problem or query …
leave me a message, i’ll try my best to solve it out.

Add a Comment

Your email address will not be published. Required fields are marked *