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.

"JavaFX CSS" is similar to "HTML CSS", but the properties are very different, see docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/… — fabian
– fabian, Commented Oct 23, 2017 at 15:38

Johnny · Accepted Answer · 2017-10-23 09:23:51Z

3

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.

edited Oct 23, 2017 at 9:23

answered Oct 23, 2017 at 9:10

Johnny

77112 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zoey Hewll Over a year ago

Hmmm, I'm actually not intending to get an effect that looks like a shadow, but rather using the 'box shadow' to draw a rectangle under the image.

Collectives™ on Stack Overflow

JavaFX CSS incompatibility

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related