WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： とみー
カテゴリー： マークアップ >CSS

box-shadowを感覚的に付けたいと思ったことはありませんか？
今回は感覚的に操作するだけでとても簡単にbox-shadowを付けることが出来る「Shadow Palette Generator」を紹介したいと思います。

「Shadow Palette Generator」の使い方

「Shadow Palette Generator」にアクセス

「Shadow Palette Generator」にアクセスします。

「Shadow Palette Generator」にアクセスするとこのような画面になっています。

「Shadow Palette Generator」の機能紹介

大きく2つの役割に分かれていて、左側が「box-shadowのプレビュー」、右側が「box-shadowの値の調整」になっています。

box-shadowの値の調整

赤枠で囲った部分を調整していきます。
Oomph、Crispy、Light Position、Background Color、Tint Shadow、Resolutionとありますが、
基本的には「Oomph」で影の雰囲気（大きさなど）を調整して、
「Light Position」で影の角度を調整して、
「Tint Shadow」で影を背景色に応じて影の色が変化するかどうか決める
という流れでOKです。

今回は、このようにCSSが書き出されました。

コーディングでの使用方法

書き出されたCSSをコピーしてbox-shadowを付けたい要素に下記のように適用するだけでOKです。

具体的な使用例は下記になります。

まとめ

今回は感覚的に操作するだけでとても簡単にbox-shadowを付けることが出来る「Shadow Palette Generator」をご紹介しました。
操作も簡単で書き出されるコードも汎用性が高くて使いやすいので気になった方は一度お試し下さい。