SWELL:box-shadowを使いこなす

box-shadowについて

CSSによる装飾としてよく用いられるbox-shadowは、指定した要素の周囲に影の効果を追加するプロパティです。

box-shadow: (inset) [offset-x] [offset-y] [blur-radius] [spread-radius] [color];

inset	影を要素の内側に描画する（指定しない場合は外側に描画する）
offset-x	要素に対して影の水平方向の距離（指定しない場合は0）
offset-y	要素に対して影の垂直方向の距離（指定しない場合は0）
blur-radius	影のぼかし量（指定しない場合は0）
spread-radius	影の拡がり（指定しない場合は影は要素と同じ大きさ）
color	影の色（透明度も指定可能）

ちょっとしたアクセントから印象的な表現まで、box-shadowを使いこなして映えるブログにカスタムするためのTipsを紹介します。
主にWordPressテーマ「SWELL」を前提として使っていますが、その他のWordPressテーマや汎用的なWebデザインにも流用可能です。

box-shadowの例

例として、当ブログでも使用している「SWELL」テーマの専用ウィジェットである[SWELL]プロフィールに、追加CSSとしてbox-shadow（その他調整用CSSを含む）を適用したビフォーアフターがこちらです（タブを選択して切り替えてみてください）。

情報として伝える要素は変わっていませんが、印象としては少し柔らかな雰囲気に変わったのではないでしょうか？
この[SWELL]プロフィールをカスタムするために追加したCSSは以下になります。

「SWELL」テーマのアップデートにより、サンプルコードで使用しているClass名などが変更される場合もあります。

/* [SWELL]プロフィール */
.p-profileBox {
  padding: 10px;
  border: none;
  box-shadow: 20px 20px 40px rgb(0, 0, 0, 0.15),
  -20px -20px 40px rgb(0, 0, 0, 0.02);
}

順番に解説していきましょう。

3行目: padding: 10px;

[SWELL]プロフィールのデフォルト余白が少し狭いので、影の柔らかい雰囲気に合わせて若干拡げています。お好みで。

4行目: border: none;

[SWELL]プロフィールにはデフォルトでボーダーが付与されているので、打ち消しでボーダーなしにしています。

5行目: box-shadow

box-shadowプロパティは、カンマで区切ることで複数の影を追加することができます。ここでは一つ目の影として、右に20px、下に20pxの距離に、40pxのぼかし量で、不透明度15%の黒を指定しています（rgb表記についてはこちらを参照ください）。

2つ目の影として、左に20px、上に20pxの距離に、40pxのぼかし量で、不透明度2%の黒を指定しています。

box-shadowの各数値によっても見た目が大きく変わります。例えば、影の距離を0、ぼかし量を少なく、色の不透明度を上げた場合は、

/* [SWELL]プロフィール */
.p-profileBox {
  padding: 10px;
  border: none;
  box-shadow: 0 0 20px rgb(0, 0, 0, 0.5);
}

このように、いかにも「ドロップシャドウで影を付けました」という野暮ったい見た目になってしまいます。

box-shadowジェネレーター

自然なbox-shadowにするためには、結果を見ながらトライアンドエラーを繰り返すことも必要です。しかし、手入力ではなかなか辛いものがあるので、便利なbox-shadowジェネレーターを紹介します。

Neumorphism.io

box-shadowのバリエーション

参考までに、いくつかbox-shadowのバリエーションを作ってみました。

box-shadowバリエーション1

/* [SWELL]プロフィール */
.p-profileBox {
  padding: 10px;
  border: none;
  background-color: #f0f0f0;
  box-shadow: 2px 2px #000,
  10px 10px rgb(0, 0, 0, 0.2),
  20px 20px #eee;
}

box-shadowバリエーション2

/* [SWELL]プロフィール */
body {
  background-color: #f1d2e0;  /* カスタマイザーでbodyの背景色を適時変更 */
}
.p-profileBox {
  padding: 10px;
  border: none;
  border-radius: 40px;  /* 角丸にする */
  box-shadow: 20px 20px 40px -10px rgb(0, 0, 0, 0.2),
  inset 6px 6px 10px rgb(255, 255, 255, 0.4),
  inset -6px -6px 10px rgb(0, 0, 0, 0.2);
}

これらのCSSコードは、カスタマイザーの「追加 CSS」に記述することで、カスタムした見た目に反映できます。