box-shadow（ボックスシャドウ）、使ってますか？私は使ってます。
ふわっと浮かせる表現をしたいときにけっこう使いますよね。
上記boxのCSSはこんな感じになっています。
一番シンプルなタイプのものです。
.samplebox {
width: 80%;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
box-shadow: 0px 0px 6px 3px #cccccc;
border-radius: 6px;
}
しかしこのbox-shadow、複雑なものになるとCSSで書くのがちょっとめんどくさい。
そこで今回はこの「box-shadow」「border-radius」を「簡単に・視覚的に」設定できるジェネレータをご紹介したいと思います。
box-shadowとborder-radiusジェネレーター
CSS3 box-shadowとborder-radiusジェネレーター
簡単な操作複雑なシャドウの設定ができます。
React Native（モバイルアプリのフレームワーク）ソースも書き出してくれるありがたさ。
box-shadowとborder-radiusジェネレーターの使い方
使い方と言っても超簡単。
プレビュー
「プレビュー」は「box-shadow」「border-radius」を設定するサンプルのボックスの見た目を設定することができます。
色はピッカーで選択できますし、幅も高さもスライダーでぱぱっと調節できます。
borderの設定
ボックスにボーダーを設定します。
ボーダーが不要なら「border-width」を「0」にすればOK。
border-radiusの設定
ボックスの「丸み」を設定します。
「まとめて動かす」をON（青色背景）にすると4隅の設定をまとめてできますし、「まとめて動かす」をOFF（薄い灰色背景）にすると4隅を個別に設定することもできます。
shadowの設定
いよいよ影をつけていきます。
「内側に影をつける」にするとボックスの内側に影が付きます。下のように立体的に見せたり、へこんだ表現にしたりできますね。
外側に影をつけるとこんな感じ。
「shadowを追加する」ボタンをクリックすると、複数の影を設定することができます。
使う場面はあまりないのかもしれませんが、内側と外側に設定したりとか。
ソースをコピペ！
プレビューの上に表示されたスタイルをボックスのCSSにコピペします。
※WEBサイトで使用する場合はreact native以降のソースは不要です。
例えばボックスのコードがこれだったら、
.samplebox2 {
width: 80%;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
}
こんな風にコピペすれば、
.samplebox2 {
width: 80%;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
/* box-shadow */
box-shadow:0px 0px 19px -4px #2a30bc inset,0px 0px 25px 2px #bc1efe;
/* border-radius */
border-radius:10px;
}
box-shadowとborder-radiusジェネレーターまとめ
box-shadowとborder-radiusジェネレーター、プレビューで見ながら作業できるのでとっても便利です。
ジェネレータの動きがきびきびしてるのもいい！
コメント