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

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

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

リンク先

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

使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よかったらシェアしてください!

コメント

コメントする

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

目次