Sass 関数で造る UI の統一感 シリーズSass 関数で Material Design のようなシャドウ表現

はじめに

Material Design のような高度を活用したシャドウ表現を Sass 関数で作ってみました。

サンプル

実際にこの関数を使っているサンプルがこちらです。

See the Pen SCSS Material Design Shadow by nuko’s kitchen (@nukos) on CodePen.

Sass 関数

使い方

一番簡単な使い方はこの通りです。layer-shadow(10) 第1引数に高度（depth）を指定するだけ。関数内で高度に合わせたシャドウの距離、透明度、ぼけ具合を調整してくれます。layer-shadow( $dp: 0, $x: 0px, $y: 1px, $blur: 1px ) 第2引数以降で X 軸、Y 軸を指定することで、光源の座標を制御できます。Material Design の「光と影」の定義では光源は主光源で影の方向が示され、すべての角度からの環境光がやわらかな影を表現します。

.card {
  box-shadow: layer-shadow(1);

  &.dp-2 { box-shadow: layer-shadow(2); }
  &.dp-3 { box-shadow: layer-shadow(3); }
  &.dp-4 { box-shadow: layer-shadow(4); }
}

おわりに

アプリや Web サイトの UI にシャドウを適用する際にこのような Sass 関数を使うことをルール付ければ一定の法則性を持たせられデザインの統一感を維持できますね。これ以外にも z-index を制御したり 文字のカラーを制御できたら便利そうです。

参考サイト

• マテリアル デザインのガイドライン（日本語版）
• 今どきデザインはこれ！拡散型シャドウの基本から作成方法まで（PSチュートリアル + HTML/CSSスニペット付）

シリーズ

1. Sass 関数で Material Design のようなシャドウ表現