先日、アニメーション付きCSSグラデーション生成ジェネレーター
CSS Gradation Generator」を紹介しましたが、
同じようにCSSでボックスに影を付ける「box-shadow」プロパティを手軽にサクッと生成できる
「CSS BoxShadow Generator」を作ってみたので紹介してみます。

CSS BoxShadow Generator


「CSS BoxShadow Generator」を別枠で表示

入力項目は「box-shadow」プロパティの設定となる
「水平方向」「垂直方向」「ぼかし」「広がり」「色」に分かれています。

「水平方向」はシャドウの水平(左側)方向のから距離。
「垂直方向」はシャドウの垂直(上端)方向からの距離。
「ぼかし」はシャドウのぼかしの強度。
「広がり」はシャドウの広がりの強度。
「色」はシャドウの色の指定。

入力した値は即座に画面上のボックスエリアに反映されます。

入力エリア下にあるCSSプロパティ生成エリアも
入力した値が即座に反映されるようになっており、
右側にあるコピーボタンで表示されているコードをコピーすることができます。

生成したボックスシャドウに対して、
入力エリア下にある「ボーダー」のチェックボタンをONにすることで
「border」プロパティが追加され、ボックスにボーダーを付けることもできます。

ボーダーの設定は「太さ」と「色」を指定できるようになっており、
「角丸」の値を入れることで「border-radius」プロパティも追加されます。
※ボーダーの種類は「solid」のみとなっています。

ジェネレータ内の数値を指定する箇所については、
入力エリアにカーソルをフォーカスした後は
キーボードの「↑」「↓」キーで数値を増減できるようになっているので
数字を直接入力せずに簡単に値を変えることもできます。

ボックスシャドウの指定とは別にジェネレータ画面上の
body背景とボックスエリアの背景色も
下部の入力エリアから指定ができるようになっていますが
こちらは生成されるCSSには影響されません。
※あくまでデモ画面内での色指定のみになります。

生成されるCSSプロパティはベンダープレフィックスなどもなく、
ボックスシャドウを作成するうえで必要最低限の要素になっています。
※ベンダープレフィックスの追加要望があった場合は対応させていただきます。

現状はまだこのジェネレーターはβ版としているので、
今後も改善や要素の追加などもしていきたいと思っています。

シンプルな形でのCSSボックスシャドウジェネレーターになっていますが、
サクッとCSSボックスシャドウを作成する際にぜひ。。。

BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSSのボックスシャドウ(box-shadow)をサクッと生成できる「CSS BoxShadow Generator」作ってみました

Hatena Bookmark
Popular Entries
Recent Entries
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books