Grow your CSS skills. Land your dream job.

Gradient

  • # May 4, 2013 at 1:00 am

    Hi Everybody,

    Good day
    Please see the following code and response.

    background: #6a6a6a url(images/nav-bar-bg.png) repeat-x;
    background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
    background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
    background: linear-gradient(-90deg, #b9b9b9, #6a6a6a);

    Please let me know that what is `gradient` and `linear-gradient`? Why takes different values here like
    2nd line `webkit-gradient(linear, left top, left bottom,`
    3rd line `-moz-linear-gradient(top and`
    4th line `background: linear-gradient(-90deg,`

    No more, I am waiting for your kind response.

    Thank you.

    # May 4, 2013 at 5:25 am

    background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#6a6a6a));
    background: -webkit-linear-gradient(top, #b9b9b9, #6a6a6a);
    background: -moz-linear-gradient(top, #b9b9b9, #6a6a6a);
    background: -o-linear-gradient(top, #b9b9b9, #6a6a6a);
    background: linear-gradient(to bottom, #b9b9b9, #6a6a6a);

    First one is old webkit syntax, 2nd to 4th are the usual vendor prefixed syntaxes and 5th is the standardized syntax. Afaik all can be in degrees but I don’t know why you would want that here (maybe save a few bytes), so changed it to the more usual syntax. The different values are a demonstration of how non standard syntaxes can change over time, just deal with it ;)

    # May 4, 2013 at 7:50 am

    Tools are available to make your work easier and also to help you to understand:

    [tool1](http://www.display-inline.fr/projects/css-gradient/#direction=right&startType=name&startValue=aliceblue&endType=rgba&endValue=255,100,100,1 “Tool1″), [tool2](http://www.colorzilla.com/gradient-editor/ “tool2″)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".