gradients with css

     Friends , as we discuss in our previous post that some part of the css3 have different syntax for different browser . Actually it depends on browser designing . Now we will discuss a part like it , in which different browser have different syntax for Gradients in css .I think you have used gradients in adobe photoshop . IF you do not know that what is gradients then I am showing you some images , so that you get clear picture in your mind .

 

image 1

 image 2

 
                                                                                                                                                                                         





                                                                 image 3

All the above shown images are gradients . Let's  discuss that how we can create it . The basic syntax used in gradients is as -
  note : - we used linear gradient on the above images . There may be radial gradient . We are going to tell you the the syntax for linear gradient .
  remember : - Different browser have different syntax(prefix in the syntax) .
 syntax : -  "  -linear-gradient( gradient styling ); "
 Now we take example for the above syntax.
example 1 :-  "  -linear-gradient(left , gold , red); "
 Through this example a gradient like in image 1 will be created . But remember to add prefixes      -moz , -webkit and -o for browsers mozzila , google chrome and opera respectively. A full example for chrome is given as -
 full example : -  "  -webkit-linear-gradient(left, gold , red);  "


example 2 : - "  -linear-gradient(left , blue , white);  "
 Through this example you will be able to create gradient like image 3 .

\creating striped gradient like in image 2 . Now we are going to tell you that how to create striped background .

example 3 : -  "  -linear-gradient(top , gold , white  , orange );  "
   Through this example you will be able to create gradient like image 2 .

    We will discuss more on gradient on later post .Our next topic will be more on gradient and radial gradient .
    check our previous page on multiple background with css by clicking continue

• continue

     If you have any problem then contact us or comment on that post your problem .
 We have checked our script with google chrome version 19.0.1084.52 .
                                                                                               - Thanks to visit .