Creating 3D-looking 'sunken' label effect in css javafx

问题

So, I've been trying for a while now to create a really nice-looking 'copyable-label' where, essentially it's a text field, styled like a label, but more intuitive to copy from (if I strip all the border styling/etc/editable from a text field and make it exactly like a label, it simply isn't obvious you can copy from it). One solution I thought might look really nice, is to give the label a slight 'sunken' look in its respective container.

something a bit like the input field (the one that says 'search terms...' at the top of the page here ignore the parralax effect. The best I could get is by using an inner-shadow with a three-pass box to try and make it look as sunken as possible, but the lines aren't 'sharp enough' if you will. I think I can accomplish it with the innershadow effect, I'm just not enough of an expert to figure out how to coax it into the proper form.

My attempt so far looks like:

And to accomplish that I used the following CSS:

.label { 
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 5, 0.0 , 3, 3 );
    -fx-background-color: darkgrey;
}

As you can see, it definitely has the 'sunken' effect, it's just quite subtle, the lines aren't sharp at all, and the colors I chose happen to magnify the effect a bit, when I port it to other colors, the difference is much less dramatic.

This is all using the latest java 8 build, windows, desktop application.

回答1:

What about this:

.copyable-label {
     -fx-background-color: rgba(255,255,255,0.75),
                           linear-gradient(to bottom,#aaaaaa 0%,#cccccc 100%);
     -fx-background-insets: 0,1;
     -fx-padding: 7px;
     -fx-background-radius: 3px;
     -fx-border-radius: 3px;
     -fx-effect: innershadow(three-pass-box, rgba(0,0,0,0.75),1,0,1,1);
     -fx-font: 14px "Arial";
     -fx-text-fill: black;
 }

I've used the proposed styling by @Chen-Asraf, but in JavaFX.

The main difference is you can't apply several effects on top of each other, but you can apply this on the background. Using comma separated values for the background color, you have the white color on the back and the linear gradient on top of it, but with 1 pixel insets, so a white 1px border could be seen if the effect is not applied.

The black inner shadow is applied with 1 px radius and 1x1 offset. This could be also generated in the background using three layers and no effect:

.copyable-label {
     -fx-background-color: rgba(0,0,0,0.75),
                           rgba(255,255,255,0.75),
                           linear-gradient(to bottom,#aaaaaa 0%,#cccccc 100%);
     -fx-background-insets: 0 1 1 0, 1 0 0 1, 1;
     -fx-padding: 7px;
     -fx-background-radius: 3px;
     -fx-border-radius: 3px;
     -fx-font: 14px "Arial";
     -fx-text-fill: black;
 }

This scene has a Label and a Textfield, both with the same style. Setting the textfield as no editable, the only difference between these controls is you can only select and copy the text of the textfield.

@Override
public void start(Stage primaryStage) {
    Label label=new Label("Text");
    label.getStyleClass().add("copyable-label");
    label.setPrefWidth(100);

    TextField textField=new TextField("Text");
    textField.setEditable(false);
    textField.getStyleClass().add("copyable-label");
    textField.setPrefWidth(100);
    textField.setMinWidth(100);
    textField.setMaxWidth(100);

    VBox root = new VBox(20,label,textField, new Button("Ok"));
    root.setStyle("-fx-background-color: #ccc;");
    root.setAlignment(Pos.CENTER);

    Scene scene = new Scene(root, 300, 250);
    scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}

回答2:

How about something like this? Looks good even without the white 2nd inner shadow.

A good trick is to have a very very faint gradient in the back that goes from darker (top) to lighter (bottom), which gives the effect of something that is hiding the light coming from the top, so it's only faintly accessible at the bottom.

Also this is a nifty tool to use for stuff like that:

• http://www.cssmatic.com/box-shadow for box shadow
• http://www.colorzilla.com/gradient-editor/ for gradients

.label {
  -webkit-box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,0.75), inset -1px -1px 1px 0px rgba(255,255,255,0.75);
     -moz-box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,0.75), inset -1px -1px 1px 0px rgba(255,255,255,0.75);
          box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,0.75), inset -1px -1px 1px 0px rgba(255,255,255,0.75);
  padding: 7px 10px;
  background: #eee;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  width: 100px;


    background: #aaaaaa; /* Old browsers */
    background: -moz-linear-gradient(top,  #aaaaaa 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #aaaaaa 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #aaaaaa 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #aaaaaa 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #aaaaaa 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
body { background: #ccc; }

<div class="label">
  Text
</div>

来源：https://stackoverflow.com/questions/27253234/creating-3d-looking-sunken-label-effect-in-css-javafx