Grow your CSS skills. Land your dream job.

CSS Gradient

  • # May 21, 2010 at 3:45 pm

    I am trying to make my login form completely CSS and am having a hard time making a css gradient that starts at the top and goes from #202020 to #2A2A2A for about 360 pixels then the rest of the page is white. I have a pic that does this as the body background. Below is a pic of the form.

    How can I accomplish this with only CSS3?

    [img]http://highergroundstudio.com/css_login_form.png[/img]

    # May 22, 2010 at 4:31 am
    Code:
    #header {
    background: rgb(32,32,32); /* For browsers that don’t support gradients */
    background: -webkit-gradient( /* Webkit gradient */
    linear,
    left bottom,
    left top,
    color-stop(0.03, rgb(42,42,42)),
    color-stop(0.10, rgb(32,32,32))
    );
    background: -moz-linear-gradient( /* Firefox gradient */
    90deg,
    rgb(42,42,42) 3%,
    rgb(32,32,32) 10%
    );
    border-bottom: 1px solid #000;
    height: 360px;
    }

    Use this as the ‘header’ and set the body background to white.

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

You must be logged in to reply to this topic.

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