ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSS3 Drop Shadows GeneratorはCSS3を使ったボックスに対する影付け処理をビジュアル的に行えるサービスです。

CSS3を使えばテキストやボックスに対して影を付けるのが簡単です。とは言え細かくカスタマイズされた影をつけるのは非常に手間ひまがかかるでしょう。そこで使ってみたいのがビジュアル的に設定ができるCSS3 Drop Shadows Generatorです。


トップ画面です。


影の設定です。パラメータを色々いじるだけで表現が自在に変更できます。


ボックスの大きさも変えられます。


最後にスタイルの出力です。CSSとSASSで出力できます。


こんな感じに斜めの影も設定できます。


左右に付けるとちょっと膨らんだ感じに。

ボックスの大きさはもちろん、影の方向やぼかし具合、大きさも自由に変更ができます。基本的にスライダーがから選択するだけなので、簡単でしょう。そしてプレビューを見ながら最適な影を作れたら後はスタイルシートを生成するだけで完了です。

CSS3 Drop Shadows GeneratorはJavaScript製、GPL v3のオープンソース・ソフトウェアです。


MOONGIFTはこう見る

スタイルシートの設定はどんどん高度になっており、Dreamweaverのようなオーサリングツールであってもパラメータを手作業で細かく指定しなければならなくなっているようです。これではオーサリングツールを使っている意味がなくなってきてしまいます。

かといって全てを手打ちで入力するというのも大変です。そこでぜひCSS3 Drop Shadows Generatorのような専用のスタイルシート生成サービスを活用していきましょう。全体のデザインバランスを保つ必要はありますが、ベースを生成するのは手軽になるはずです。

CSS3 Drop Shadows Generator

lkdjiin/css3_shadow · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2