www.webdeveloper.com
Results 1 to 4 of 4

Thread: CSS3 linear gradient syntax help

  1. #1
    Join Date
    Dec 2004
    Posts
    88

    CSS3 linear gradient syntax help

    Hi.

    I'm trying to create a gradient background using CSS3 techniques.
    I'd like to make a linear gradient from top to bottom, and go from transparent to #eee. However, I'm having trouble with the syntax.

    This is what I have so far:

    Code:
    background: transparent; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffeeeeee'); /* for IE */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0)), to(rgba(238, 238, 238, 1.0))); /* for webkit browsers */
    background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(238, 238, 238, 1.0) 100%); /* for firefox 3.6+ */
    I get various errors like missing semi-colons and parse errors.
    Can anyone help?

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Check out these sites, they'll give you the syntax until you feel comfortable enough typing it in that you can just do it from memory:

    http://gradients.glrzad.com/
    http://www.westciv.com/tools/gradients/index.html

    EDIT: What do you mean parse errors? Are you talking about CSS? For the record, glancing at the CSS syntax seems fine to me.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Dec 2004
    Posts
    88
    Hi and thanks.

    I have actuelly been to both sites, but I they don't seem to calculate alpha transparency, the RGBa thing.

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Code, a link, and in this case even a screenshot, will help your cause.

    Are you sure you interpreting what the alpha transparency is doing correctly? Your gradients are supposed to go from transparent (or whatever the color(s) behind your element are) to an off white.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles