css javafx에서 3D-looking 'sunken'레이블 효과 만들기

Question

그래서 필자는 본질적으로 텍스트 필드이고 레이블과 같은 스타일 인 정말 멋진 '복사 가능 라벨'을 만드는 데 오래 동안 노력해 왔습니다. , 더 직관적으로 복사 할 수 있습니다 (텍스트 필드에서/etc/editable 스타일을 모두 지우고 레이블과 똑같이 만들면 간단히 복사 할 수 없습니다). 제가 생각하기에 정말 좋은 솔루션이라고 생각되는 한 가지 해결책은 해당 용기에 라벨을 약간 가라 앉히는 것입니다.

뭔가가 입력란과 비슷합니다 (페이지 상단의 '검색어 ...'라고 말하면 here은 parralax 효과를 무시합니다. 얻을 수있는 가장 좋은 방법은 3 개의 내부 그림자를 사용하는 것입니다. -pass 상자를 사용하여 가능하면 가라 앉은 것처럼 보이게하지만 줄을 '날카로 웠을'정도로 만들지는 않습니다. 나는 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 빌드, 윈도우, 데스크톱 응용 프로그램을 사용하고 있습니다.

Answer 1

어떤 약에 대한

http://www.colorzilla.com/gradient-editor/ 그림자 :

은 또한이 그런 것들에 사용할 멋진 도구입니다 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; 
} 

@ Chen-Asraf가 제안한 스타일링을 JavaFX에서 사용했습니다.

가장 큰 차이점은 서로 위에 여러 효과를 적용 할 수는 없지만 배경에 적용 할 수 있다는 것입니다. 쉼표로 구분 된 배경색 값을 사용하면 뒤쪽에 흰색 색상이 있고 그 위에 선형 그래디언트가 있지만 1 픽셀 인세 트가 있으므로 효과를 적용하지 않으면 흰색 1px 테두리가 표시됩니다.

검은 색 내부 그림자가 1x 반경 및 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, 모두 있습니다. 텍스트 필드를 편집 할 수 없도록 설정하면 이러한 컨트롤 간의 유일한 차이점은 텍스트 필드의 텍스트 만 선택하고 복사 할 수 있다는 것입니다. 즉 CSS의 큰 조각 (그리고 나는이 하나의 웹을 수행하려는 경우 I는 향후 사용을 위해 북마크에게 그것을 해요)하지만

@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

어때? 흰색의 제 2 내면의 그림자가 없어도 선명하게 보입니다.

좋은 트릭은 어두운 부분 (위쪽)에서 밝은 부분 (아래쪽)으로가는 매우 희미한 그래디언트를 사용하여 위쪽에서 오는 빛을 숨기는 무언가의 효과를 제공하므로 단지 희미하게 바닥에서 접근 가능. 상자

• http://www.cssmatic.com/box-shadow 그라데이션

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