4 Replies Latest reply: Jan 15, 2013 8:45 AM by 984080 RSS

    Button Style

      Hi guys,
      i have a problem with styling a button in my css file. I like to give my button an inner shadow with a linear-gradient effekt.
      The button is a simple arrow picture with transparent background and at the top it sould be green and go to yellow at the bottom.
      If it is not able to color it with an inner shadow is there an other option i can use? Two effects also did not work out.
      -fx-fill is not working.

      Here the part i want to change.
          -fx-effect: innershadow( three-pass-box , #56c102 , 5 , 0.5 , 0 , 0 );
          /*-fx-effect: innershadow( three-pass-box , #8fe130 , 5 , 1 , 0 , 0 ); not working with second */
          /*-fx-effect: linear-gradient(to bottom, #56c102 0%,#8fe130 100%); not working*/
          /*-fx-effect: innershadow( three-pass-box ,linear-gradient(to left, derive(#5fc502,-15.5%), derive(#5fc502,34%) 30%), 20 , 0.5 , 0 , 0 ); not working*/ 
          /*-fx-fill: linear-gradient(to bottom, derive(#5fc502,-15.5%), derive(#5fc502,34%) 30%); not working*/     
          /*-fx-content-display: linear-gradient(to bottom, derive(#5fc502,-15.5%), derive(#5fc502,34%) 30%); not working*/
      Is there an way to handle this without loading another image?
      Thank you.
        • 1. Re: Button Style
          Has noone a solution for this problem?
          • 2. Re: Button Style
            I'm not sure where you want to go with your styling of your button, but those links can help you a lot with custom css styling:

            • 3. Re: Button Style
              Unfortunately that is not what i am looking for.
              I need something like.
               -fx-effect: innershadow( three-pass-box , linear-gradient(...) , 5 , 0.5 , 0 , 0 );
              I though that should be no problem but it seems it is just possible with pictures :(
              • 4. Re: Button Style
                I don't think this is possible.

                --> from the documentation, you'll see it expecting a number value.

                Inner Shadow

                A high-level effect that renders a shadow inside the edges of the given content.

                innershadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

                <blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
                <color> The shadow Color.
                <number> The radius of the shadow blur kernel. In the range [0.0 ... 127.0], typical value 10.
                <number> The choke of the shadow. The choke is the portion of the radius where the contribution of the source material will be 100%. The remaining portion of the radius will have a contribution controlled by the blur kernel. A choke of 0.0 will result in a distribution of the shadow determined entirely by the blur algorithm. A choke of 1.0 will result in a solid growth inward of the shadow from the edges to the limit of the radius with a very sharp cutoff to transparency inside the radius. Values should be in the range [0.0 ... 1.0].
                <number> The shadow offset in the x direction, in pixels.
                <number> The shadow offset in the y direction, in pixels.

                Maybe you can try with multiple borders on the same side..

                Edited by: 981077 on 15-jan-2013 6:45