teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問JavaFX CSSでフラットツールバーみたいなマウスポインターが置いていない状態では平面的なデザインを再現するには？

編集履歴

質問編集履歴

5

書式変更

2016/10/23 03:05

投稿

mr0237
mr0237

スコア164

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- ###==========================================================
17
+ ```JAVAFX CSS
18
18
 
19
19
  .button:hover {
20
20
 
@@ -22,17 +22,19 @@
22
22
 
23
23
  }
24
24
 
25
- ###==========================================================
25
+ ```
26
+
27
+
26
28
 
27
29
  しかし、ポインターをボタンの上に置いてない状態、いわゆる平面的なデザインがうまくいきません。
28
30
 
29
31
 
30
32
 
31
- ###====================================================
33
+ ```JAVAFX CSS
32
34
 
33
35
  -fx-background-color:transparent = rgba(0,0,0,0);
34
36
 
35
- ###====================================================
37
+ ```
36
38
 
37
39
 
38
40
 

4

書式変更

2016/10/23 03:05

投稿

mr0237
mr0237

スコア164

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
 
16
16
 
17
- =============================================================
17
+ ###==========================================================
18
18
 
19
19
  .button:hover {
20
20
 
@@ -22,17 +22,17 @@
22
22
 
23
23
  }
24
24
 
25
- =============================================================
25
+ ###==========================================================
26
26
 
27
27
  しかし、ポインターをボタンの上に置いてない状態、いわゆる平面的なデザインがうまくいきません。
28
28
 
29
29
 
30
30
 
31
- ====================================================
31
+ ###====================================================
32
32
 
33
33
  -fx-background-color:transparent = rgba(0,0,0,0);
34
34
 
35
- ====================================================
35
+ ###====================================================
36
36
 
37
37
 
38
38
 

3

書式の変更

2016/10/23 03:02

投稿

mr0237
mr0237

スコア164

test CHANGED
@@ -1 +1 @@
1
- JavaFX CSSでボタンに立体感を出すには？
1
+ JavaFX CSSでフラットツールバーみたいなマウスポインターが置いていない状態では平面的なデザインを再現するには？
test CHANGED
@@ -1,63 +1,57 @@
1
+ ###前提・実現したいこと
2
+
1
- JavaFX CSSでポインターをボタンの上に置くとそのボタンだけが立体表示されるフラットデザイン的な機能を作りたくて、JavaFX CSSで書いたのですが、うまく動きません。以下のコードを示しておきます。
3
+ JavaFX CSSでフラットツールバーみたいなマウスポインターが置いていない状態では平面的なデザインを再現するには？
2
4
 
3
5
 
4
6
 
7
+ ###発生している問題・エラーメッセージ
8
+
9
+
10
+
11
+ JavaFX CSSでポインターをWindowsのツールバーのようなボタンの上に置くとそのボタンだけが立体表示される
12
+
13
+ フラットツールバーを作りたいのですが、マウスポインターを置くと立体的な表示するところまではできました。↓
14
+
15
+
16
+
5
- ===================================================================================
17
+ =============================================================
6
18
 
7
19
  .button:hover {
8
20
 
21
+ -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
9
22
 
23
+ }
10
24
 
11
- -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
25
+ =============================================================
26
+
27
+ しかし、ポインターをボタンの上に置いてない状態、いわゆる平面的なデザインがうまくいきません。
12
28
 
13
29
 
14
30
 
31
+ ====================================================
32
+
15
- -fx-background-insets: 0px 0px -1px 0px, 0px, 1px, 2px;
33
+ -fx-background-color:transparent = rgba(0,0,0,0);
34
+
35
+ ====================================================
16
36
 
17
37
 
18
38
 
39
+ ↑の方法でやると、平面的なデザインと言いますか、何もない状態になるのです。
40
+
19
- -fx-background-radius: 3px, 3px, 2px, 1px;
41
+ しかし、ボタン上にマウスポインターを置くと立体表示（ボタンが表示）されないのです。
20
42
 
21
43
 
22
44
 
23
- -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em;
45
+ 平面的なデザインでマウスポインターを置くと立体的な表示するにはどのように書けばいいのでしょうか？
24
46
 
25
47
 
26
48
 
27
- -fx-shadow-highlight-color: ladder(-fx-background, 0%, #ffffff12, 20%, #ffffff12, 70%, #ffffff12, 90%, #ffffffb2, 100%, #ffffffbf);
49
+ よろしくお願いします。
28
50
 
29
51
 
30
52
 
31
- -fx-background: derive(-fx-base, 26.4%);
53
+ ###補足情報(言語/FW/ツール等のバージョンなど)
32
54
 
33
55
 
34
56
 
35
- -fx-base: #ececec;
36
-
37
-
38
-
39
- -fx-outer-border: derive(-fx-color, -23%);
40
-
41
-
42
-
43
- -fx-color: -fx-base;
44
-
45
-
46
-
47
- -fx-inner-border: 0%, 0%, 0%, 100%, NO_CYCLE, 0%, ladder(-fx-color, 0%, derive(-fx-color, 30%), 40%, derive(-fx-color, 20%), 60%, derive(-fx-color, 25%), 80%, derive(-fx-color, 55%), 90%, derive(-fx-color, 55%), 100%, derive(-fx-color, 75%)), 100%, ladder(-fx-color, 0%, derive(-fx-color, 20%), 20%, derive(-fx-color, 10%), 40%, derive(-fx-color, 5%), 60%, derive(-fx-color, -2%), 100%, derive(-fx-color, -5%));
48
-
49
-
50
-
51
- -fx-body-color: 0%, 0%, 0%, 100%, NO_CYCLE, 0%, ladder(-fx-color, 75%, derive(-fx-color, 8%), 80%, derive(-fx-color, 10%)), 100%, derive(-fx-color, -8%);
52
-
53
-
54
-
55
- }
56
-
57
-
58
-
59
- =================================================================================
60
-
61
-
62
-
63
- ポインターをボタンの上に置いても、立体表示されません。どのようにしたらいいのでしょうか？ よろしくお願いします。
57
+ 言語：JAVAFX ツール：Scene Builder

2

書式の改善

2016/10/23 03:01

投稿

mr0237
mr0237

スコア164

test CHANGED
File without changes
test CHANGED
@@ -61,47 +61,3 @@
61
61
 
62
62
 
63
63
  ポインターをボタンの上に置いても、立体表示されません。どのようにしたらいいのでしょうか？ よろしくお願いします。
64
-
65
-
66
-
67
- ###前提・実現したいこと
68
-
69
- ここに質問したいことを詳細に書いてください
70
-
71
- (例)PHP(CakePHP)で●●なシステムを作っています。
72
-
73
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
74
-
75
-
76
-
77
- ###発生している問題・エラーメッセージ
78
-
79
-
80
-
81
- ```
82
-
83
- エラーメッセージ
84
-
85
- ```
86
-
87
-
88
-
89
- ###該当のソースコード
90
-
91
- ```ここに言語を入力
92
-
93
- ここにご自身が実行したソースコードを書いてください
94
-
95
- ```
96
-
97
-
98
-
99
- ###試したこと
100
-
101
- 課題に対してアプローチしたことを記載してください
102
-
103
-
104
-
105
- ###補足情報(言語/FW/ツール等のバージョンなど)
106
-
107
- より詳細な情報

1

書式の改善

2016/10/22 11:55

投稿

mr0237
mr0237

スコア164

test CHANGED
File without changes
test CHANGED
@@ -1,7 +1,107 @@
1
- ポインターをボタンの上に置くとそのボタンだけが立体表示されるフラットデザイン的な機能を作りたいのですが、JavaFX CSS Reference Guid
1
+ JavaFX CSSでポインターをボタンの上に置くとそのボタンだけが立体表示されるフラットデザイン的な機能を作りたくて、JavaFX CSSで書いたのですが、うまく動きません。以下のコードを示しておきます。
2
-
3
- （http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#scrollbar）を見てみるとそれらしきものが見当たらないのです。
4
2
 
5
3
 
6
4
 
7
- JavaFX CSSでフラットデザインのボタンはできないのでしょうか？
5
+ ===================================================================================
6
+
7
+ .button:hover {
8
+
9
+
10
+
11
+ -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
12
+
13
+
14
+
15
+ -fx-background-insets: 0px 0px -1px 0px, 0px, 1px, 2px;
16
+
17
+
18
+
19
+ -fx-background-radius: 3px, 3px, 2px, 1px;
20
+
21
+
22
+
23
+ -fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em;
24
+
25
+
26
+
27
+ -fx-shadow-highlight-color: ladder(-fx-background, 0%, #ffffff12, 20%, #ffffff12, 70%, #ffffff12, 90%, #ffffffb2, 100%, #ffffffbf);
28
+
29
+
30
+
31
+ -fx-background: derive(-fx-base, 26.4%);
32
+
33
+
34
+
35
+ -fx-base: #ececec;
36
+
37
+
38
+
39
+ -fx-outer-border: derive(-fx-color, -23%);
40
+
41
+
42
+
43
+ -fx-color: -fx-base;
44
+
45
+
46
+
47
+ -fx-inner-border: 0%, 0%, 0%, 100%, NO_CYCLE, 0%, ladder(-fx-color, 0%, derive(-fx-color, 30%), 40%, derive(-fx-color, 20%), 60%, derive(-fx-color, 25%), 80%, derive(-fx-color, 55%), 90%, derive(-fx-color, 55%), 100%, derive(-fx-color, 75%)), 100%, ladder(-fx-color, 0%, derive(-fx-color, 20%), 20%, derive(-fx-color, 10%), 40%, derive(-fx-color, 5%), 60%, derive(-fx-color, -2%), 100%, derive(-fx-color, -5%));
48
+
49
+
50
+
51
+ -fx-body-color: 0%, 0%, 0%, 100%, NO_CYCLE, 0%, ladder(-fx-color, 75%, derive(-fx-color, 8%), 80%, derive(-fx-color, 10%)), 100%, derive(-fx-color, -8%);
52
+
53
+
54
+
55
+ }
56
+
57
+
58
+
59
+ =================================================================================
60
+
61
+
62
+
63
+ ポインターをボタンの上に置いても、立体表示されません。どのようにしたらいいのでしょうか？ よろしくお願いします。
64
+
65
+
66
+
67
+ ###前提・実現したいこと
68
+
69
+ ここに質問したいことを詳細に書いてください
70
+
71
+ (例)PHP(CakePHP)で●●なシステムを作っています。
72
+
73
+ ■■な機能を実装中に以下のエラーメッセージが発生しました。
74
+
75
+
76
+
77
+ ###発生している問題・エラーメッセージ
78
+
79
+
80
+
81
+ ```
82
+
83
+ エラーメッセージ
84
+
85
+ ```
86
+
87
+
88
+
89
+ ###該当のソースコード
90
+
91
+ ```ここに言語を入力
92
+
93
+ ここにご自身が実行したソースコードを書いてください
94
+
95
+ ```
96
+
97
+
98
+
99
+ ###試したこと
100
+
101
+ 課題に対してアプローチしたことを記載してください
102
+
103
+
104
+
105
+ ###補足情報(言語/FW/ツール等のバージョンなど)
106
+
107
+ より詳細な情報