box-shadow プロパティでスタイリッシュに
インデックスカードをカスタマイズしていきましょう。
box-shadow プロパティを使っていきます。
box-shadowとは？
影をつけるプロパティです。
こちらのサイトを参照しましょう。
CSS、HTMLなどの基本的な知識は、すべてこのサイトで
得られます。
box-shadow - CSS: カスケーディングスタイルシート | MDN
box-shadow は CSS のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。
developer.mozilla.org
インデックスカードとは？
投稿記事のリンクです。
マウスオーバー前はこのような感じ。いたってシンプルです。
マウスオーバー後のエフェクト
マウスオーバー後。影がついて、浮き出て見えるエフェクトを
かけました。いい感じにスタイリッシュになりました！
「サイトをカスタマイズ」→「追加CSS」をクリック。
次のようなCSSを追加します。インデックスカードをいじるためのセレクタは
「.a-wrap」ですね。↓
.a-wrap{border:solid 1px #d2d5d9;
}
.a-wrap:hover {background-color: #f2f2f2;
box-shadow: 0px 3px 8px rgba(0,0,0,.15), 0 6px 7px rgba(0,0,0,.15);
transition: all 0.5s ease-in-out;
}この部分ですね。↓
詳細を見てみましょう
1pxの薄いボーダーで囲みました。↓
a-wrap{
border : solid 1px #d2d5d9;
}a-wrap:hover {
background-color: #f2f2f2;
box-shadow: 0px 3px 8px rgba(0,0,0,.15), 0 6px 7px rgba(0,0,0,.15);
transition: all 0.5s ease-in-out;
}「.a-wrap:hover」というのは、マウスが乗った時という意味。
背景の色はgoogleのカラーピッカーで好みの色を。
「カラーピッカー」で検索すればすぐ出てきます。
お好みのHEXの値をコピペしましょう。
box-shadowプロパティで影を付けています。
このプロパティさえあれば、何にでも影を付けられます。↓
box-shadow: 0px 3px 8px rgba(0,0,0,.15), 0 6px 7px rgba(0,0,0,.15);影の濃さなどは値をいじって試してみてください。追加CSSで、
リアルタイムにプレビュー確認できます。
transition: all 0.5s ease-in-out; ですが、
変化する時間とタイミングです。
0.5秒かけて、最初と最後が滑らかに、という意味。
色々試しましたが、transitionはこのくらいの値が
個人的には好きです。
いかがでしたか？
スタイリッシュにカスタマイズできたでしょうか？
自分好みに、値をいじって試してみてください！
コメント