在css javafx中创建具有3D外观的“凹陷”标签效果

Question

所以，我已经尝试了一段时间来创建一个非常好看的'可复制标签'，其中，基本上它是一个文本字段，样式像标签，但更直观的复制（如果我剥离所有边框样式/ etc / editable来自文本字段，并使其完全像一个标签，它只是不明显你可以从它复制）。我认为可能看起来非常好的一个解决方案是在相应的容器中给标签一个轻微的“凹陷”外观。

有点像输入字段（在页面顶部显示'搜索字词......'的字段here忽略了parralax效果。我能得到的最好的是使用内阴影用一个三通盒试着让它看起来尽可能凹陷，但是如果你愿意的话，那些线条并不“足够锋利”。我想我可以通过内部阴影效果完成它，我只是不够了专家弄清楚如何将其哄骗成正确的形式。

到目前为止，我的尝试看起来像是：

为了实现这一点，我使用了以下CSS：

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

正如你所看到的，它肯定具有'凹陷'效果，它只是非常微妙，线条根本不是很尖锐，当我将它移植到其他颜色时，我选择的颜色会稍微放大一点效果颜色，差异远不那么戏剧化。

这都是使用最新的java 8 build，windows，桌面应用程序。

Answer 1

这个怎么样：

.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;
 }

我使用了@ Chen-Asraf提出的样式，但是在JavaFX中。

主要区别在于您无法在彼此之上应用多种效果，但您可以在后台应用此效果。使用逗号分隔的背景颜色值，背面有白色，顶部有线性渐变，但有1个像素插入，如果未应用效果，则可以看到白色的1px边框。

黑色内部阴影应用1 px半径和1x1偏移。这也可以在后台使用三层生成，但没有效果：

.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;
 }

此场景有Label和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();
}

Answer 2

这样的事情怎么样？即使没有白色的第二个内部阴影，看起来也很好。

一个很好的诀窍是在背面有一个非常微弱的渐变，从较暗（顶部）到较浅（底部），这会产生遮挡来自顶部的光的效果，因此它会＃39 ; s只能在底部微弱地访问。

这也是一个非常好用的工具：

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

＆＃13;

＆＃13;

.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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;