このレッスンでは
- トランジションシャドウ
- ボックスシャドウでボーダーを作る
1.トランジションボックスシャドウ
ボックスシャドウにトランジションを追加して、ボックスシャドウとのインタラクションをスムーズにすることができます。たとえば、要素にホバー効果を追加して、ボックスシャドウの色を濃くすることができます。手順は次のとおりです。
- 要素にボックスシャドウを追加し、色を黒、不透明度を20%に設定したスタイルを作成します。
- [状態]メニューから[ホバー]を選択します。
- ボックスシャドウの不透明度を55%に設定します。
- [状態]メニューに戻り、[なし（通常）]を選択します。
- スタイルパネルの下部にある「効果」でトランジションを追加し、リストから「ボックスシャドウ」を選択します。
- トランジション時間を設定するか、デフォルトの200msのままにしておきます。
トランジションを追加すると、ホバー効果は、None 状態と Hover 状態の間で滑らかにフェードすることに注意してください。200ms のトランジションがなければ、ホバー効果は不透明度のレベルの間を突然行ったり来たりすることになります。ボックスシャドウを使用したホバーまたはプレスされた状態のスタイルは、お好みで変更することができます。
2.ボックスシャドウでボーダーを作成
1つの要素に複数のボックスシャドウを追加することで、ユニークな視覚効果を作り出すことができます。
ここでは、複数のボックスシャドウを使用して、微妙な境界線と影を作成する方法の例を示します。
- 外側のドロップシャドウを追加し、「ぼかし」と「距離」を0pxに、「サイズ」を1pxに設定します。
- シャドウの色を rgba(0,0,0,0.1) - 黒、不透明度10%に設定します。
- 2つ目の外側ドロップシャドウを追加します。ぼかしを8pxに、距離を2pxに設定します。
- 色も rgba(0,0,0,0.1) に設定します。