Gutenberg、だいぶ使いやすくなったので移行中です

影をつけよう!「box-shadowとborder-radiusジェネレーター」

box-shadow WEB

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ジェネレーター

shadow
CSS3 box-shadowとborder-radiusジェネレーター
簡単な操作複雑なシャドウの設定ができます。
React Native(モバイルアプリのフレームワーク)ソースも書き出してくれるありがたさ。

 

box-shadowとborder-radiusジェネレーターの使い方

使い方と言っても超簡単。
 

プレビュー

「プレビュー」は「box-shadow」「border-radius」を設定するサンプルのボックスの見た目を設定することができます。
色はピッカーで選択できますし、幅も高さもスライダーでぱぱっと調節できます。

shadow

 

borderの設定

ボックスにボーダーを設定します。
ボーダーが不要なら「border-width」を「0」にすればOK。

shadow

 

border-radiusの設定

ボックスの「丸み」を設定します。
「まとめて動かす」をON(青色背景)にすると4隅の設定をまとめてできますし、「まとめて動かす」をOFF(薄い灰色背景)にすると4隅を個別に設定することもできます。

shadow

 

shadowの設定

いよいよ影をつけていきます。
「内側に影をつける」にするとボックスの内側に影が付きます。下のように立体的に見せたり、へこんだ表現にしたりできますね。

shadow

 

外側に影をつけるとこんな感じ。

shadow

 

「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ジェネレーター、プレビューで見ながら作業できるのでとっても便利です。
ジェネレータの動きがきびきびしてるのもいい!

 

コメント

タイトルとURLをコピーしました