Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • What is css gradients ?

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 328
    Comment on it

    Hello All,

    Earlier, we have used image for gradients effect but now we will use gradient using css3 and we will see how to use many colors in gradient and only one color in gradient.

    Gradients are declared by background-color but according to short-hand css method we can sue background.

    Syntax

    1. background: linear-gradient(direction, color-stop1, color-stop2, ...);

    Gradient are two type -

    1) Linear Gradients - in this, define color goes down, up ,left ,right an diagonally.

    2) Radial Gradients - in this, goes defined by their center.

    An example with output -

    Note :- we need to use prefix for rendering in some versions 

    1. background: red; /* For browsers that do not support gradients */
    2.   background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
    3.   background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
    4.   background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
    5.   background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
    6. }
    gradients html css3 css gradient color
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: