How can I get an Embossed (raised letter) effect on text through CSS in JavaFX?

Question

I've been bashing my brain against this one for a few days but I can't find a straight forward answer to the question on google. There's plenty of CSS stuff but I don't really know what crosses over from general CSS domain into JavaFX CSS domain (if any of it does, and really I'm nto sure that anything does).

I have a label that is functionally a button. It has 3 states reflected by CSS:

1: Idle, nothing special. 2: Hovered This is where I want the text to appear "raised" 3: Pressed: I was able to figure this out.

For hovered I have the following CSS:

.label:hovered{
    //What goes in here to make the text appear embossed (raised) when the cursor 
    //is hovering over it?
}

I've tried the -fx-effect : innershadow(...) but it isn't really providing the ideal desired effect.

EDIT:: For a bit of clarity this is for what I am going (See #3). I tried the CSS but it did not work.

The appearance of the control is thus right now:

Answer 1

You can use a Lighting effect, here is a link to the Oracle tutorial on lighting.

The effect cannot be applied via CSS in Java 8. You could apply it in code or via xml.

You can add a listener on the hover property of a node to switch lighting off by setting the node effect to null and to switch it on by setting the node effect to you lighting.

There is example code in the JavaFX javadoc on Lighting, which I've just reproduced here:

Light.Distant light = new Light.Distant();
light.setAzimuth(-135.0);

Lighting lighting = new Lighting();
lighting.setLight(light);
lighting.setSurfaceScale(5.0);

Text text = new Text();
text.setText("JavaFX!");
text.setFill(Color.STEELBLUE);
text.setFont(Font.font(null, FontWeight.BOLD, 60));
text.setX(10.0);
text.setY(10.0);
text.setTextOrigin(VPos.TOP);
text.setEffect(lighting);

A drop shadow would also work and there are likely other ways to achieve what you want, all with slightly varying results.