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 .

Multiple Background with css

    The one of the most important and interesting thing in css3 is supporting multiple backgrounds on a single background . Yes css3 can supports multiple backgrounds . But the thing have to be remind is that there is different syntax for different browser . So most commonly used web browser is our target . We will target mozzila firefox , google chrome and opera .
       We talk about different browser when we use gradient in background , otherwise if we are using only some images then we don't need to talk about different browser . Because, basically the syntax is same .We will discuss about css gradient in our later post .
        I will describe here the syntax of  multiple background  -
 syntax : -
 background: url( url of the image 1), url( url of the image 2), url(url of the image 3);


        We will use bacground-position to set the position of each image in background and the syntax to set position will be as -
  syntax : -
 background-position:position1 , position2 , position 3;


          Where position1 denotes the position of background image 1 , and so on ..
          We will use background-repeat to set the background repeat or no-repeat property.

          We will take an example here, first of all I show you the images used in background

                             image1

image 2

             The css we use to create multiple background is as follows -
     css is -

<style type="text/css">

body { background:url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhIpGBvkAjidTWT8DX_FuMCGMqvVdKh4W_t5FXRqeuJs4H1_oCJTVNbcRNNcsz_32kLMP8Wieicv1UYwDLQw99yynMSMeEUcD91v9v-oZ96zKRR8qmfUpYz5cPzGTIb9HN6E0gYZOKaQ9Q/s1600/mul-bg1.jpg ), url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAY9j5yBxysrmb8cGYw59TroWZE-rTHzNmiBiAGIA9amPhzMwmmbvtmPYVhqtrp661ddaZlYYEkjlpyUGBCsceFwo2viB2HtTJF7ia7JvQRJP3p_U6pQPfI1q6R39jOtYu99Q-JEwO72NF/s1600/mul-bg2.jpg), -webkit-linear-gradient(left, rgba(255,255,255,0.2), rgba(255,255,255,1)), gold; 

       background-repeat:no-repeat,no-repeat;

       background-position:top left,bottom right;   }

</style>

     I use gradient as third background , in css part it look as  -webkit-linear-gradient(left, rgba(255,255,255,0.2), rgba(255,255,255,1)), gold .So don't confuse with it , we will talk about it later .Now the result from this css will be as -

       We think this post of course will help you in using multiple backgrounds . We have tested this script wth google chrome version 19.0.1084.52  , and firefox version 12 . But in firefox you will be enable to see this gold coloured background . Because , it is browser  dependent script But you will be able to see both images in your webpage .

 You may check our previous post for better styling in css .Press continue to go to previous post -

• continue

        If you have any problem in script then either contact us or comment on this post your problem . We would like to answer you.

                                                                                  Thanks to visit .