コンテナの影

コンテナシャドウは、要素に影を付ける視覚効果です。テキストシャドウにアクセスするには、テキスト要素を選択して スタイルパネル > 効果 > コンテナの影.

このガイドでは、以下の内容について説明します。

1. コンテナの影の遷移を生成する方法
2. コンテナの影の境界線を作成する方法

コンテナの影の遷移を作成する方法

コンテナのシャドウ遷移を組み込む機能があるため、訪問者が要素を操作すると、コンテナのシャドウの視覚的な表示が変わります。たとえば、要素にホバー効果を実装して、ホバー時にコンテナのシャドウの色合いが暗くなるようにすることができます。

1. コンテナのシャドウトランジションを含める要素を選択します
2. に行く スタイルパネル > 効果 > コンテナの影
3. 「プラス”アイコンをクリックしてコンテナの影を挿入します
4. 変更する 色相 黒にして20%の不透明度を組み込む
5. 要素にコンテナシャドウを組み込み、黒色と20%の不透明度でデザインします。
6. 選択する ホバー から 州 ドロップダウンメニュー
7. 訪問 スタイルパネル > 効果 > コンテナの影
8. コンテナの影を55%の不透明度に設定します
9. 選択する なし から 州 ドロップダウンメニュー
10. に行く スタイルパネル > 効果 > トランジション
11. クリック "プラストランジションを挿入するには「」アイコンをクリックします
12. 選ぶ コンテナの影 から タイプ ドロップダウンメニュー
13. 確立する 間隔 またはデフォルトの200msのままにしておく

トランジションを適用すると、ホバー効果は なし 州と ホバー 状態。200 ミリ秒の遷移がなければ、ホバー効果は異なる不透明度レベル間で突然切り替わります。

コンテナの影の境界線を作成する方法

単一の要素に複数のコンテナ シャドウを適用して、明確な視覚効果を生み出すことができます。複数のコンテナ シャドウを利用して微妙な境界線とシャドウを作成する例を次に示します。

1. コンテナシャドウトランジションを含める要素を選択します
2. へ移動 スタイルパネル > 効果 > コンテナの影
3. ヒット "プラス”アイコンをクリックしてコンテナの影を挿入します
4. 選ぶ 外 として タイプ
5. 調整する バツ そして はい 好みに基づく価値観
6. セット ぼかし 0ピクセルまで
7. セット サイズ 1ピクセルまで
8. セット 色 rgba(0,0,0,0.1) – 10%の不透明度の黒
9. 影の色相をrgba(0, 0, 0, 0.1)（つまり、不透明度10%の黒）に調整します。
10. 訪問 スタイルパネル > 効果 > コンテナの影
11. 「プラス”アイコンをクリックして別のコンテナの影を挿入します
12. セット ぼかし 8ピクセルまで
13. 変更する バツ そして はい 好みに基づく価値観
14. セット 色 RGBA(0, 0, 0, 0.1) に