デザイン

話題のMaterialDesignが簡単に使える様にまとめました。shadows編

Material Design
Pocket

数ヶ月前にGoogleデザインガイドラインであるのMaterialDesignが発表されていましたが、ようやく私は読みました。

そこで、いくつか参考になるもの使えるものは簡単にアウトプットできたらいいなと思いカタチにしました。

Material DesignのLayoutにでてくる、物体の重なりと影について、紹介されていますが
これを簡単に使えないかと思い、Compassのextend用と Illustratorで簡単にコピーできる様に作りました。

いちいち思い出すの面倒なので。

参考サイト

MaterialDesign – Shadows

AIファイル

ドロップシャドウはアクションにできなかった為スポイトでコピーする仕様です。
Illustratorのスポイトでのコピーの使い方は、

shadows3

まず、スポイトのアイコンをダブルクリックして、

shadows2

スポイトツールオプションが開くので、
抽出・適用の「 アピアランス 」にチェックをいれて
「 OK 」を押す。

あとは、普通にスポイトするとドロップシャドウをスポイトコピーできます。

ダウンロード

AIファイル

Palette-of-Shadows

※ダウンロード先の直接リンクや転載等はサーバー負担になりますのでやらない様にお願い致します。

Compassでのしよう方法

scssファイルサンプル

%z-depth1 {
  @include box-shadow(
    0 1px 1px 0 rgba(0,0,0,0.24),
    0 1px 1.5px 0 rgba(0,0,0,0.12)
  );
}

%z-depth2 {
  @include box-shadow(
    0 3px 3px 0 rgba(0,0,0,0.23),
    0 3px 3px 0 rgba(0,0,0,0.16)
  );
}

@bs
%z-depth3 {
  @include box-shadow(
    0 6px 3px 0 rgba(0,0,0,0.23),
    0 10px 10px 0 rgba(0,0,0,0.19)
  );
}

%z-depth4 {
  @include box-shadow(
    0 10px 5px 0 rgba(0,0,0,0.22),
    0 14px 14px 0 rgba(0,0,0,0.25)
  );
}

%z-depth5 {
  @include box-shadow(
    0 15px 6px 0 rgba(0,0,0,0.22),
    0 19px 19px 0 rgba(0,0,0,0.3)
  );
}

@extend %z-depth1;
の様にして extendで使用してみてはどうでしょうか。

私の為に作ったもので こうゆうのは作りなれてないので 逆に手間になってるかもしれません。
一つの方法としてどうでしょうか。

参考サイト

MaterialDesign – Shadows

Pocket