box - shadow

Hello friends, 
      After a time period we are here to describe the box-shadow in css . We will discuss how we can use it and how it will work for different browsers..
   We will teach you how to use it effectively in your file.
1.) First create a block . you can do it as follows

 display:block;

2.) Second, you can use a border so that it seems to be effective in your page.

3.) Third, now you can use box-shadow element of css. It can be used as-

  box-shadow: <attribute list>;

  In attribute list attributes may be in order as horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow . You can omit any attribute you don't need .So let we take an example-

 example : box-shadow: 10px 10px 5px;

  now you can also set color of the shadow by giving either color name or color value . Let we take an example-

  example : box-shadow 10px 10px 5px #898989;

  You can also set inset keyword if you want inner shadow means shadow going inside  we can do it as follows -

  

  example : box-shadow: inset 10px 10px 5px #898989; 

Now all given example will work well for internet explorer 9 but for Mozilla and chrome  you have to add a prefix as-

/* for mozilla */

  example_for_mozilla :  -moz-box-shadow: 10px 10px 5px #898989;

/* for chrome */

  example_for_chrome:   -webkit-box-shadow: 10px 10px 5px #898989;

---

Thank you all to visiting us.

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 .