css gradients part 2

 As we discuss earlier on gradient , now we discuss at some more points in gradients . Now we will discuss on radial gradient and gradient in images . Let's start our discussion -

  1.) first we discuss a linear gradient with an angle . When we talk about gradient at an angle , then keep in mind that you have to understand the angle . This angle is between a horizontal line and the line of gradient . Line of gradient will be in direction in which color density move from one color to another . As an example in the gradient  " -linear-gradient(left , color1 , color2); "   the line of gradient will be horizontal  and from left to right , because color density moves horizontally from color1 to color2 . The syntax for gradient with an angle is as -
syntax : -
                 "   -linear-gradient(<angle> , color1 , color2);  "
note : - you must prefix the syntax with -moz. And your script effect can be shown on Mozilla Firefox .

2.) Now we discuss gradients with transparency  , in this type of gradient we can use an image or a color and can change its transparency with gradient .As we discuss in our previous gradient styles , we can use left , right ,top , bottom , any angle for the gradient style . As in our syntax example we use an image for gradient , and the syntax is as -
  syntax : -
                     "  -linear-gradient( left , rgba(255,255,255,0) , rgba(255,255,255,1)),url(url of the image); "
note : - you must prefix the syntax with -moz , -webkit , -o . And you can run your script on mozilla , chrome , opera web browsers . But I recommend  you to use mozilla firefox . 

3.) Now we discuss on radial gradient , in this type of gradient we give all colors with their width space we want to use , means according to our need . It have a little bit different syntax from above . Here we specify size or width along with each color in our example , but you may leave size (we also leave it in our linear gradient examples )  then by default the stops will be equally spaced . (you can also use width of stops in linear gradient ).We use " ...." in our example for include more colors  according to your need .  Now we use a syntax here as -
 syntax : -
                   "  -radial-gradient(color1[size of stop in percentage]  , color2[size of stop ] , color3[size of stop] ....  );  "
note : - you must use -moz prefix before the syntax . And you can run your script on mozilla firefox .


4.) In this section we are going to discuss repeated background  , in this type you can repeat the color stops . The gradient we discussed earlier in this post do not support automatically repeating the color stops . So now we will use  -repeating-linear-gradient and -repeating-radial-background . Now in our example we take -repeating-linear-gradient  but you may use it on radial gradient also . The syntax looks like as -
 syntax : - 

                  "  -repeating-linear-gradient(top left -45deg , red , red 5px, black 5px , black 10px ); "
note : -   use  -moz prefix before the syntax . And run your script on mozilla firefox .


to check our previous pot on css and gradients click continue .It will help you to understand this post .

• continue

     If you have any problem in the script then either comment on this   post or contact us by email we would like to answer you .
 
      If you think that this post is helpful , then like this post on google+ and share it on other social networking sites .
                                                                                                  - Thanks to visit .

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 . 

More on css

      Well , yet now you have learnt many things in css . But css still does not end . As time increases the diffrent version of css comes in existence , as the styling required more in a webpage . At this time , we can do many more things with this styling .
       Now the css3 ccomes in existence and most of the designer use it in their webpages . The most interesting thing about css3 is its animation designing , multiple background , etc . Yes , we can design an animation inour webpage through css3 .
       But we are going to discuss a different thing the border radius . You have created border in your page elements . But now you are also able to rounded cornered border . I will discuss here the same thing . The syntax for creating border radius is -
   syntax : -
 border-radius: [ radius ] ;
  
    Here , the  radius part will be either an integer or the percentage .

ex : -
 1 . border-radius:12px;
 2 . border-radius:30%;


      To use the border-radius use background of an element . whenever you give background to an element . Then background is rectangle shaped . Then you can assign different radius to each different corner . The syntax will be as -
 syntax : -
border-radius:[ radius1  radius2  radius3  radius4 ]; 


      Now the question is radius1 will be of which corner ?and some more like it ... Now I have the answer , the figure given below explain it clearly -

           so finally you can see from picture that corner no. 1 has radius1and so on . 

        If you use only two elements in radius part as -

 border-radius:[ radius1 , radius2 ];

        Then radius1 will be of corner 1 and corner 3 . And radius2 will be of corner 2 and corner 4 . A full example of four radius elements is as given below .I have created a class corner here .

   ex : -

 .corner{background:#9090cc;  text-align:center; color:red; width:600; border-radius: 18em 2em 12em 2em; }

         you can also use px instead of em I used here . But remember em is greater unit than px , so shape will be more rounded in em with same values. 

        I have created an element with the same script , and it looks as - 

                                    check our previous post on css -

• continue

    

               we have checked our all script with google chrome version 19.0.1084.52 .If you want to watch all effects of this css then update your browser or try to use mozilla firefox version greater than 10 . If you have any problem in the script then contact us .
                                                                                               - Thanks to visit.

drop down navigation

        After creation of simple navigation bar we will create a drop down navigation bar. A menu item that have its sub-menu item then you will need a drop down navigation bar. So , finally we are going to create a drop down navigation bar. If you have remember the code for navigation bar , so we use li:hover attribute in drop down navigation bar . So our code becomes as given -
           

<style type="text/css">
.menu ul { list-style:none; font-size:26px; }
.menu ul li { position:relative; float:left; }
.menu ul li a { text-decoration:none; padding:12px 12px 12px 12px; color:#ffffff; display:block; text-align:center; border-right:2px solid #456745; border:1px solid#467746; width:150px; background:#333333; }
.menu ul li a:hover { color:#aa2233; display:block; height:32px; background:#778877; }
.menu ul li ul { display:none; }
.menu ul li:hover ul {font-size:26px; display:block; position:absolute; top:56px; min-width:120px; left:-36px; }
.menu ul li:hover ul a {display:block; background:#000; color:#ffffff; width:144px;}
.menu ul li:hover ul li a:hover {display:block; width:148px;background:#666666; color:#aacc99;}
</style>


       The text with hyper color is new code included in previous code used in navigation bar . Include this code in your webpage and check it . To run this css your HTML list format will be as -


<div class="menu">
<ul>
<li>
<a href="#">home</a> 
<ul>
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
</ul>
</li>
<li>
<a href="#">contact</a></li>
</ul>
</div>


      Here watch the HTML code carefully I use nested list to create sub-menu items html and css of menu item home .
      I have tested this code with browser google chrome with version 19.0.1084.52 and netscape navigator 9 . If you have some problem with this code then contact us and tell about your problem . We would like to answer you.
     If you want to check my previous post on code of navigation bar then click here -  navigation bar .
     If you want to apply this navigation bar on blogger then check it  - navigation bar on blogger .
                                                                                   
                                                                                                  - Thanks to visit .