[FIXED] JavaFX Dropshadow CSS: What do the parameters mean? How to implement width and height in CSS?

Issue

I've been searching for this all over the internet, but for most of the questions I viewed that answered in CSS, people just gave code without explaining them.

-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 0.0);

For this line of code for implementing a drop shadow in CSS, what do the variables mean?

From what I inferred, it means:

-fx-effect: dropshadow(blurType, color, radius, spread, offsetX, offsetY)

But in the actual DropShadow effect tag in FXML, there are 6 numeric variables instead of 4.

<DropShadow blurType="GAUSSIAN" color="#ee8c9e8f" height="151.47" offsetX="3.0" offsetY="3.0" radius="73.75" spread="0.5" width="145.53" />

How can I implement this effect with 8 parameters in CSS?

Solution

Here's what the documentation in the JavaFX CSS Reference Guide says:

<effect>

JavaFX CSS currently supports the DropShadow and InnerShadow effects from the JavaFX platform. See the class documentation in javafx.scene.effect for further details about the semantics of the various effect parameters.

Drop Shadow

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

dropshadow( <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 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].
<number> The shadow offset in the x direction, in pixels.
<number> The shadow offset in the y direction, in pixels.

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.

From that, it appears you can't specify all 9 properties from CSS. In particular, you can't set the width, height, or input from CSS. But if you look at the documentation of DropShadow.radius or InnerShadow.radius you'll see something like:

The radius of the shadow blur kernel. This attribute controls the distance that the shadow is spread to each side of the source pixels. Setting the radius is equivalent to setting both the width and height attributes to a value of (2 * radius + 1).

So if looks like setting the radius also sets the width and height, you just can't give different values for the width and height via CSS.

Answered By - Slaw
Answer Checked By - Terry (JavaFixing Volunteer)