Grow your CSS skills. Land your dream job.

CSS 3 Gradients work in Firefox 3.6(Namoroka alpha1)

  • # August 10, 2009 at 3:38 pm

    I’ve just download and installed Mozilla.org Firefox 3.6 Namoroka alpha 1 build and discovered that this build supports multiple backgrounds and gradients. I was just looking at Chris video tutorial on CSS 3 techniques and thought I’d see if I could re-create the radial gradient in this build. The CSS mark-up is similar to the -webkit-gradient function in that you have to declare the dimension, colours and colour stop but unlike the -webkit function you have to declare the dimension as pixels and the color-stop as decimal number and not a percentage and most importantly you have to use the no-repeat as in this build if don’t the redials just overflow each other and repeat across the screen.

    Here’s my CSS mark-up:

    Code:
    background:
    -moz-radial-gradient(45px 45px, 10px, 52px 50px, 30px, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(0.90, #019F62)) no-repeat,
    -moz-radial-gradient(105px 105px, 20px, 112px 120px, 50px, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(0.75, #ff0188)) no-repeat,
    -moz-radial-gradient(95px 15px, 15px, 102px 20px, 40px, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(0.80, #00b5e2)) no-repeat,
    -moz-radial-gradient(0px 150px, 50px, 0px 140px, 90px, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(0.80, #e4c700)) no-repeat;

    Just a reminder you’ll need to download and install Namoroka alpha 1 http://www.mozilla.org/projects/firefox/3.6a1/releasenotes/#downloadandinstall to see this work.

    # August 11, 2009 at 2:23 am

    welcome…..

    but I will wait for official releaase thanks

    # August 11, 2009 at 7:34 am

    Thanks for the welcome

    I just wanted to share this bit of information as a heads-up on what we should expect from Firefox 3.6 when released and it’s nice to know that they are catching up with Safari and Google Chrome in these regards.

    All we needed know is for Opera and Microsoft (IE8) to imperment these CSS 3 techniques into their browsers and we be laughing.

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".