4 Replies Latest reply: Dec 12, 2012 2:13 AM by 956927 RSS

    "globalization" of color gradient in CSS

    956927
      Hy there,

      i am using in my CSS file some kind of "global" definitions:

      .root{
      -custom-color:#666666;
      }

      .button{
      -fx-background-color:-custom-color;
      }

      as i tried to do a "global" gradient like

      .root{
      -custom-gradient:#F8F8F8,linear-gradient(#F8F8F8 0%, #E4E4E4 50%, #CCCCCC 100%);
      }

      i could not use this definition on my button (gradient did not show up)

      .button{
      -fx-background-color: -custom-gradient;
      }

      is this known or am i doing something wrong with the gradient ?

      BR
        • 1. Re: "globalization" of color gradient in CSS
          David Grieve
          Works for me.
          • 2. Re: "globalization" of color gradient in CSS
            956927
            HY there,

            the problem is the following:

            When i use the gradient directly in the css with
            .button{
            -fx-background-color:#29420C,linear-gradient(#29420C 0%, #53801C 30%, #5E9718 100%);
            }

            it looks different to my globalization solution like

            .root{
            -custom-gradient:#29420C,linear-gradient(#29420C 0%, #53801C 30%, #5E9718 100%);
            }

            .button{
            -fx-background-color: -custom-gradient;
            }

            so the gradient is there but does not look like it should ;)
            If i replace the gradient with
            .root{
            -custom-gradient: red;
            }
            The color is shown red only gradients are "mispainted"
            They are to black and dark;
            • 3. Re: "globalization" of color gradient in CSS
              David Grieve
              Ok. I see it now. The issue is this. The parser doesn't know that -custom-gradient is a <paint>[,<paint>]*. It sees the hash hex-digits and parses it as a color and then skips over the input it doesn't understand until it hits the semicolon. I'm surprised that the parser didn't spit out some kind of "I don't know how to parse this" warning.

              The solution is that you need to specify your layers in the -fx-background-color and have the -custom-gradient be just a <paint>
              .root{
                  -custom-focus-color: #29420C;
                  -custom-gradient: linear-gradient(#29420C 0%, #53801C 30%, #5E9718 100%);
              }
              
              .button {
                  -fx-background-color: -custom-focus-color, -custom-gradient;
              }
              • 4. Re: "globalization" of color gradient in CSS
                956927
                hy,

                thanks this did the job for me

                BR