CSSのBox ShadowをプレビューしながらCSSコード作成できるWebサービス 『Advanced Box Shadow CSS Generator』

CSSのBox Shadowをプレビューしながら
CSSコードを出力できるWebサービス。
何かと使いがちなBox Shadow、Boxやイメージに
簡単に付加することができます。

目次

リンク先

Advanced Box Shadow CSS Generator リンク先はこちらから

使い方

画面は左右に分かれていて左側がBoxやイメージなどShadowをつける対象のオブジェクトの
設定画面となります。
最初はBoxが表示されていて幅や高さ、配色や角丸の設定が可能となっています。

角丸は自由に上下左右の大きさを設定が可能です。
細かい様々なシーンでも対応できそうです。

イメージを読み込んでみました。イメージにも角丸の設定が可能です。
よく見かけるのがイメージに影をつけたいパターンがありますが、このWebサービスで
影をプレビューしながら作ると分かりやすいと思います。

次は右側から実際に影を作っていきます。
h-offset、v-offset対象オブジェクトからどれだけズラすか?
blurで影のぼかし具合を調整。
spreadで影の広がりを調整できます。
colorでは影の配色を変更が可能です。

イメージに影を付けてoffsetを付けてみました。
ずらすだけではかなりくっきりとしています。

blurを付けて影の色もグレーにしてみるといい感じになりました。
画面の下にはCSSコードが出力されているので、このプロパティをCSSに付加してあげれば
すぐに使う事ができます。

プレビューでしっかりと確認しながら調整できるのでコードだけで書いていると
分かりづらいBox Shadowも簡単に作れます。
Web制作が捗る便利なWebサービスです。

よかったらシェアしてください!
  • URLをコピーしました!

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次