Web Analytics Made Easy -
StatCounter specifying CSS gradients in pixels - CodingForum

Announcement

Collapse
No announcement yet.

specifying CSS gradients in pixels

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • specifying CSS gradients in pixels

    Is there anyway to specify -webkit-gradient() and -moz-linear-gradient() in pixels rather than percentages?

    Thanks,
    Zach

  • #2
    Why didn't you try it instead of wasting your time waiting for an answer here?

    The answer is YES, but now you have to experiment with it anyway to get the effect you want.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      Thanks for the snarky reply. I don't know why you would assume that I had not tried it. Replacing relative values with pixels does not work:

      Code:
      				background-image: -webkit-gradient(
          				linear,
         	 				left bottom,
          				left top,
          				color-stop(0px, rgba(0, 47, 167, 1.0)),
          				color-stop(80px, rgba(255, 255, 255, .75)),
          				color-stop(100px, rgba(255, 255, 255, .0))
      				);
      				background-image: -moz-linear-gradient(
          				center bottom,
          				rgba(0, 47, 167, 1.0) 0px,
          				rgba(255, 255, 255, .75) 80px,
          				rgba(255, 255, 255, .0) 100px
      				);
      I thought it was pretty clear that if the answer was "yes" I was also asking HOW to implement it.

      Comment


      • #4
        If you would have posted your code in the original post as you did in the second post I would have known you tried working with it and the 'snarky reply' would not have been made. And if you don't ask a question, don't be insulted if it is not answered.

        In your second post you did not ask a question, but you did make a statement.
        Replacing relative values with pixels does not work:
        I wont answer that. I think this is still experimental, IJDK.

        Anyway, I believe you want to see this work => first it's background: not background-image:. That may work but its wrong. Second it's a css element and I don't see what you applied it to. In playing with this I find it does not play well with the body tag.

        Your going to have to play with this but this works in FF:
        Code:
        <!DOCTYPE HTML>
        <html>
        <head>
        </head>
        <body >
        <div id="container" style="background: -moz-linear-gradient(
        bottom, rgba(0, 47, 167, 1.0)0px,
        rgba(255, 255, 255, .75) 80px,
        rgba(0, 0, 0, .0)100px);">
        <h2>welcome home</h2>
        <p>You big bad beautiful doll</p>
        <p>You big bad beautiful doll</p>
        <p>You big bad beautiful doll</p>
        </div>
        </body>
        </html>
        Evolution - The non-random survival of random variants.
        Physics is actually atoms trying to understand themselves.

        Comment


        • #5
          Well, I guess I am somewhat the asshole here because I actually had not tried it in Firefox. Any idea about a webkit solution?

          Comment


          • #6
            Sorry to bump this, but I still can't figure out how to specify absolute gradients in webkit.

            Thanks!

            Zach

            Comment


            • #7
              I thought you would get this Zachgold, that's why I didn't include it.

              As of Jan this year (I think) webkit said it will use the same format as mos. So here is the above code with webkit AND the opera linear-gradient. Really don't think IE8 can do it.

              Code:
              <!DOCTYPE HTML>
              <html>
              <head>
              </head>
              <body >
              <div id="container" style="
              background: -moz-linear-gradient(
              bottom, rgba(0, 47, 167, 1.0)0px,
              rgba(255, 255, 255, .75) 80px,
              rgba(0, 0, 0, .0)100px);
              background: -webkit-linear-gradient(
              bottom,
              rgba(0, 47, 167, 1.0)0px,
              rgba(255, 255, 255, .75) 80px,
              rgba(0, 0, 0, .0)100px);
              background-image: -o-linear-gradient(
              bottom,
              rgba(0, 47, 167, 1.0)0px,
              rgba(255, 255, 255, .75) 80px,
              rgba(0, 0, 0, .0)100px);
              ">
              <h2>welcome home</h2>
              <p>You big bad beautiful doll</p>
              <p>You big bad beautiful doll</p>
              <p>You big bad beautiful doll</p>
              </div>
              </body>
              </html>
              Evolution - The non-random survival of random variants.
              Physics is actually atoms trying to understand themselves.

              Comment

              Working...
              X