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テーマや汎用的なWebデザインにも流用可能です。

box-shadowの例

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

[SWELL]プロフィールのデフォルトのイメージ

情報として伝える要素は変わっていませんが、印象としては少し柔らかな雰囲気に変わったのではないでしょうか?
この[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、ぼかし量を少なく、色の不透明度を上げた場合は、

影の距離を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

このサイトでは、それぞれのスライダーを調節して結果を見ながら、自然な影と立体感の表現を生成し、CSSのコードとして取得することができます。

このようなbox-shadowのCSSコード生成できるジェネレーターのサイトは数多くあるので、自分のブログのデザインに合わせて探してみるのも良いでしょう。

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」に記述することで、カスタムした見た目に反映できます。

box-shadowのデザイン原則を作る

一つの要素にbox-shadowを使いこなせるようになったら、box-shadowのデザイン原則を考えてみましょう。

ブログのようなWebページは、単なるコードの集合体で現実世界と切り離して自由なデザインが可能ですが、現実世界にも存在する表現は、できるだけ現実世界のルールに合わせて構築したほうが自然に見える場合があります。

まず、box-shadowはつまるところ影の表現です。現実世界において、影ができるためには光源が必要となります。したがって、同一ページ上で複数のbox-shadowを用いる場合は、どのくらいの強さの光がどの方向から当たっているかを考えながら、影の方向を統一すると一貫性のあるデザインになります。

また、その要素がどれだけ表面から浮き上がって見えるかを意識して、同じようなカテゴリのものは、同じ高さに見えるように影をつけてみると良いかもしれません。

しかし、なんでもかんでも影を付けるとデザインが散漫になってしまったり、ページのレンダリング速度が落ちてしまうこともあるので、drop-shadowの使い過ぎには注意しましょう。

まとめ

  • box-shadowの各項目の意味を知ろう
  • ジェネレーターを活用しよう
  • 光源を意識して統一感のある影を作ろう
  • box-shadowの使い過ぎには注意しよう

コピペから始めるのも全然OKです。慣れてきたら自分でbox-shadowを使ったデザインに挑戦してみましょう!

この記事がお役に立てたのならシェアをお願いします!
  • URLをコピーしました!
目次