在css中創建三維外觀的'凹陷'標籤效果javafx

Question

因此，我一直在嘗試一段時間來創建一個非常漂亮的'可複製標籤'，其中，本質上它是一個文本字段，樣式類似於標籤，但更直觀的複製（如果我從文本字段中刪除所有邊框樣式/ etc /可編輯的，並使其完全像一個標籤，它是根本不明顯，你可以從它複製）。我認爲一種解決方案可能看起來非常好，就是讓標籤在其各自的容器中稍微「凹陷」一下。

東西有點像輸入字段（在頁面頂部顯示'搜索字詞...'的那個忽略了帕拉克斯效應。我能得到的最好的是通過使用內部陰影與三儘量讓它看起來儘量凹陷，但如果你願意的話，線條不夠「銳利」，我認爲我可以用Innershadow效果來實現它，我只是不夠專業如何將它哄到適當的形式

我嘗試到目前爲止看起來像：

而要實現這一目標我用下面的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，desktop應用程序。

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

這樣的事情呢？即使沒有白色的第二個內部影子也很好看。

一個很好的訣竅是在背部有一個非常非常微弱的漸變，從較暗（頂部）到較亮（底部），這會產生隱藏來自頂部的光的效果，所以它只是在底部隱約可達。

而且這是使用這樣的東西一個極好的工具：

• http://www.cssmatic.com/box-shadow框中陰影
• http://www.colorzilla.com/gradient-editor/的梯度

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