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 : -
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 .
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 .
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 .
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 .
No comments:
Post a Comment