JavaFX CSS incompatibility

Question

Disclaimer: I'm very new to CSS.

I am attempting to draw a box with a shadow, using css, in a Java application using JavaFX. I used JSFiddle to verify that the CSS was doing what I wanted, and once I'd gotten everything perfect I went and inserted that into the stylesheet I'm using for the object I'm trying to draw.

Here's the Original CSS:

.tallBox {
    width: 30px;
    height: 90px;
    background-color: #00AA00;
    box-shadow: 1px 1px #008800,
                2px 2px #008800,
                3px 3px #008800,
                4px 4px #008800;
}

And here's the CSS I tried using in JavaFX:

.tallBox {
    -fx-min-width: 30px;
    -fx-max-width: 30px;
    -fx-min-height: 90px;
    -fx-max-height: 90px;
    width: 30px;
    height: 90px;
    background-color: #00AA00;
    box-shadow: 1px 1px #008800,
                2px 2px #008800,
                3px 3px #008800,
                4px 4px #008800;
}

Java complained about box-shadow only taking a list of <size> as arguments, so I split it into box-shadow and box-shadow-color as below:

.tallBox {
    -fx-min-width: 30px;
    -fx-max-width: 30px;
    -fx-min-height: 90px;
    -fx-max-height: 90px;
    width: 30px;
    height: 90px;
    background-color: #00AA00;
    box-shadow: 1px 1px,
                2px 2px,
                3px 3px,
                4px 4px;
    box-shadow-color: #008800;
}

This stopped java from complaining, but nothing is being displayed, and JSFiddle doesn't accept the box-shadow arguments in the new format.

Does anyone know how to correctly do this in JavaFX?

Edit: I developed my CSS based on this question and answer.

Answer 1

I think what you need is -fx-effect: dropshadow(<blur-type>, <color>, <number1>, <number2>, <number3>, <number4>), for example:

.tallBox {
<other properties>
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

Here the JavaFX CSS Reference Guide that explains everything a little better but in essence:

• blur-type = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
• color The shadow Color
• number1 The radius of the shadow blur kernel. In the range [0.0 ... 127.0], typical value 10.
• number2 The spread of the shadow. The spread 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 spread of 0.0 will result in a distribution of the shadow determined entirely by the blur algorithm. A spread of 1.0 will result in a solid growth outward of the source material opacity to the limit of the radius with a very sharp cutoff to transparency at the radius. Values should be in the range [0.0 ... 1.0].
• number3 The shadow offset in the x direction, in pixels.
• number4 The shadow offset in the y direction, in pixels

For a short tutorial-type article, see here.