カードを使ったデザインは、GoogleのアプリやWebサービスで用いられている方法で、情報を近接・集約させることで非常に見易く個人的にも好きな表現方法です。
以前の記事では、HTMLとCSSのコピペでできるカードデザインを紹介しましたが、そこからアップデートしています。
関連記事 HTMLとCSSのコピペで実装できるカード型デザイン6種
そこで今回は、カードのデザインに付随して立体感を出すシャドウでよく使うパターンについて、簡単な解説とともに紹介します。
これ以上にいっぱいのパターンがあると思いますが、この記事は中の人がよく使う系のものについてです。
最後までご覧頂き、使えそうなものがあったら是非使ってみてください。
目次
カードのシャドウデザイン8つ
カードによく使うシャドウのサンプル8つです。
SANGOのカードとよくみるパターンの2種
当サイトでも使っているWordPressテーマSANGOのカードと、主観的ながらよく見るカードのシャドウです。
hover(マウスを乗せた時) すると、変形するCSSのtransformでヒョイっと動く形で、SANGOは縦のY軸に4px動きます。
シャドウの大きさが違うカード4種
この4つのカードはhover での動きは加えてませんが、シャドウが徐々に大きくした感じです。
シャドウ4以降の影の大きさだと、カード同士の余白をとらないと圧迫感がありますね・・。
hoverした時のサンプル2種
ちょっとシャドウは関係ないかもしれませんが、hover した時に変化する2種で、これをベースにして改造してよく使っています。
PCで見た時の左は、シャドウにbox-shadowではなく、filter: drop-shadow で影を付け、右はカード自体の背景色を変えるパターンです。
カードのコピペ用CSS
シャドウが作れるCSSのコピペ用コード一式です。全部で8種類あるので、好みのものをコピペして利用ください。
シャドウ以外に、それぞれのカードのレイアウトやデザインを使いたい場合には、以下の共通コードも一緒にコピペして、HTMLのXXXXここにシャドウのクラスを書くXXXX を削除して、それぞれ使いたいclassに書き換えて利用ください。
コードを表示する
<ul class="card_shadow">
<li>
<a href="">
<div class="card_box XXXXここにシャドウのクラスを書くXXXX">
<img src="https://dubdesign.net/wp-content/uploads/2021/06/cardshadow001.jpg" alt="カードの写真">
<div class="card_innertext">
<p class="card_date">2021年6月8日</p>
<p class="card_tit">SANGOのカード</p>
</div>
<span>sango_shadow</span>
</div>
</a>
</li>
</ul>/* CARDの基本CSS */
.card_shadow {
border: none;
list-style: none;
width: 100%;
display: flex;
padding: 0;
margin: 0 auto;
flex-wrap: wrap;
justify-content: space-between;
}
.card_shadow li {
width: 47%;
display: inline-block;
margin-bottom: 4%;
}
.card_shadow li a {
text-decoration: none;
}
.card_box {
background: #FFF;
border-radius: 5px;
overflow: hidden;
position: relative;
height: 100%;
}
.card_box img {
width: 100%;
}
.card_box .card_innertext {
padding: 15px 25px 18px;
}
.card_box .card_innertext .card_date {
margin: 0;
font-weight: 200;
}
.card_box .card_innertext .card_tit {
margin: 5px 0 0;
font-size: 1.3rem;
font-weight: 600;
border: none;
line-height: 1.3;
}
.card_box span {
position: absolute;
top: 10px;
left: 10px;
background: #FFF;
padding: 3px 13px;
font-size: 0.7rem;
border-radius: 50px;
color: #999;
}
@media screen and (max-width: 767px) {
/* （ここにモバイル用スタイルを記述） */
ul.card_shadow {
flex-direction: column;
}
.card_shadow li {
width: 100%;
}
}
コピペする場合は、上記の共通コードとセットにしてそれぞれのCSSをコピペして利用ください。
SANGOのカード
ぴょこんとカードが出て、リンク要素であることも分かりやすいシンプルなカードです。
シャドウも控え目なので、非常に使いやすいです。
コードを表示する
/* SANGO_Shadow */
.sango_shadow {
transition: 0.2s ease-in-out;
box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
}
.sango_shadow:hover {
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
transform: translateY(-4px);
}シャドウ1＋hover
hover するとシャドウが強く放射状に出ます。
もう少しシャドウを弱くしたい場合は、.shadow_001:hover の中の rgba の前のpxの数値の部分を小さく変えるとシャドウを弱くできます。
コードを表示する
.shadow_001 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.shadow_001:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}シャドウ2
シャドウが極小で、hover の変化はないカードです。
コードを表示する
.shadow_002 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}シャドウ3
シャドウが少し小さめのカードです。
コードを表示する
.shadow_003 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}シャドウ4
この辺りからシャドウが強めになってきます。
コードを表示する
.shadow_004 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}シャドウ5
個人的に限界ギリギリでシャドウが大きめのカードです。
コードを表示する
.shadow_005 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}シャドウが青めのその他1
hover 時に動きがあるカードで、シャドウを青目にしています。
青目にすると、グロー（発光している方）のボタンと併用したりするとなじみます。
コードを表示する
.other_001 {
transition: 0.2s ease-in-out;
filter: drop-shadow(0px 0px 2px #b0c4de);
}
.other_001:hover {
filter: drop-shadow(8px 8px 8px #b2c4de);
transform: translateY(-4px);
transition-duration: 0.2s;
}hoverすると背景が変わるその他2
マテリアルデザインじゃなく、フラットなデザインでも使える感じのシャドウで、奥行きじゃない方法でリンク要素をわかってもらうためにはちょうどいいタイプのカードです。
コードを表示する
.other_002 {
transition: 0.4s ease-in-out;
box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
}
.card_shadow > li > a >
.other_002:hover {
background-color: #c8e4ff;
color: #FFF;
transition-duration: 0.2s;
}さいごに
こんなようなカードのシャドウのパターンですが、SANGOのパターンのシャドウの使い方が現在一番ハマっていて、それをベースにカスタマイズでよく使います。
そんなこんなで、自分好み＋サイトにあったシャドウの感じを見つけてみてください。
