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サービスです。
コメント