ボックスへの影付きスタイルシート設定をパラメータ指定で簡単に「CSS3 Drop Shadows Generator」
CSS3 Drop Shadows GeneratorはCSS3を使ったボックスに対する影付け処理をビジュアル的に行えるサービスです。
CSS3を使えばテキストやボックスに対して影を付けるのが簡単です。とは言え細かくカスタマイズされた影をつけるのは非常に手間ひまがかかるでしょう。そこで使ってみたいのがビジュアル的に設定ができるCSS3 Drop Shadows Generatorです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 9.21.27.1366599224.png)
トップ画面です。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 9.22.04.1366599227.png)
影の設定です。パラメータを色々いじるだけで表現が自在に変更できます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 9.22.24.1366599230.png)
ボックスの大きさも変えられます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 9.22.34.1366599234.png)
最後にスタイルの出力です。CSSとSASSで出力できます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 9.22.49.1366599237.png)
こんな感じに斜めの影も設定できます。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-22 9.22.55.1366599241.png)
左右に付けるとちょっと膨らんだ感じに。
ボックスの大きさはもちろん、影の方向やぼかし具合、大きさも自由に変更ができます。基本的にスライダーがから選択するだけなので、簡単でしょう。そしてプレビューを見ながら最適な影を作れたら後はスタイルシートを生成するだけで完了です。
CSS3 Drop Shadows GeneratorはJavaScript製、GPL v3のオープンソース・ソフトウェアです。
MOONGIFTはこう見る
スタイルシートの設定はどんどん高度になっており、Dreamweaverのようなオーサリングツールであってもパラメータを手作業で細かく指定しなければならなくなっているようです。これではオーサリングツールを使っている意味がなくなってきてしまいます。
かといって全てを手打ちで入力するというのも大変です。そこでぜひCSS3 Drop Shadows Generatorのような専用のスタイルシート生成サービスを活用していきましょう。全体のデザインバランスを保つ必要はありますが、ベースを生成するのは手軽になるはずです。