2019.09.13スポンサーリンクbox-shadow(ボックスシャドウ)、使ってますか?私は使ってます。浮かせる表現をしたいときにけっこう使いますよね。上記boxのCSSはこんな感じになっています。シンプルなタイプのものです。6px;}しかしこのbox-shadow、複雑なものになるとCSSで書くのがちょっとめんどくさい。そこで今回はこの「box-shadow」「border-radius」を「簡単に・視覚的に」設定できるジェネレータをご紹介したいと思います。簡単な操作複雑なシャドウの設定ができます。Native(モバイルアプリのフレームワーク)ソースも書き出してくれるありがたさ。使い方と言っても超簡単。「プレビュー」は「box-shadow」「border-radius」を設定するサンプルのボックスの見た目を設定することができます。色はピッカーで選択できますし、幅も高さもスライダーでぱぱっと調節できます。borderの設定ボックスにボーダーを設定します。ボーダーが不要なら「border-width」を「0」にすればOK。border-radiusの設定ボックスの「丸み」を設定します。「まとめて動かす」をON(青色背景)にすると4隅の設定をまとめてできますし、「まとめて動かす」をOFF(薄い灰色背景)にすると4隅を個別に設定することもできます。shadowの設定いよいよ影をつけていきます。「内側に影をつける」にするとボックスの内側に影が付きます。下のように立体的に見せたり、へこんだ表現にしたりできますね。外側に影をつけるとこんな感じ。「shadowを追加する」ボタンをクリックすると、複数の影を設定することができます。使う場面はあまりないのかもしれませんが、内側と外側に設定したりとか。ソースをコピペ!プレビューの上に表示されたスタイルをボックスのCSSにコピペします。native以降のソースは不要です。*/border-radius:10px;}こんな風になるのですbox-shadowとborder-radiusジェネレーターまとめbox-shadowとborder-radiusジェネレーター、プレビューで見ながら作業できるのでとっても便利です。box-shadowとborder-radiusジェネレーターCSS3で使うbox-shadowのジェネレーターです。Nativeのも作ってくれます。ついでにborder-radiusも設定出来ます。Gradient」をわかりやすくご紹介します。Favs」の使い方を分かりやすく紹介します。WEB【初心者CSS】忘れやすいCSS疑似要素・疑似クラスまとめCSSの疑似要素・疑似クラスの違いや使い方を初心者向けにわかりやすくまとめました。::first-letter、::first-line、::before、::after、:first-child、:last-child、:nth-child(n)、:nth-child(n-1)、:not(X)のサンプルつき。無料で使えるおしゃれで手軽なデザインツール、「canva」の使い方をわかりやすくお伝えします。アイキャッチの作り方のサンプルとチュートリアルです。MAKER」の使い方をわかりやすく説明します。WEBそのリンク、切れてません?「dead-link-checker」で無料チェック!そのリンク切れを無料でチェックできる「dead-link-checker」の使い方を分かりやすく説明します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。素材アーカイブ2020年2月2020年1月2019年12月2019年11月2019年10月2019年9月2019年8月おすすめサーバこのサイトでも使用しています。目次box-shadowとborder-radiusジェネレーターbox-shadowとborder-radiusジェネレーターの使い方プレビューborderの設定border-radiusの設定shadowの設定ソースをコピペ!box-shadowとborder-radiusジェネレーターまとめAUTHOR書いた人nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。nullll14人気記事Cocoonをコーポレートサイトっぽくカスタマイズ!1トップページ編2019.10.152020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!6おまけ:新着情報編2019.11.262020.01.14Cocoonをコーポレートサイトっぽくカスタマイズ!7おまけ:ヘッダに電話番号編2019.12.122020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!2メニュー編2019.10.162020.01.09Cocoonをコーポレートサイトっぽくカスタマイズ!3料金表編2019.10.182020.01.09nullll未経験から突然小さな会社のインハウスWebデザイナーになりましたので、WEBサイト制作に役立つ情報のメモを残そうと思います。同じような方の参考になれば幸いです。Reserved.検索メニューWEBWORDPRESSWORKSいろいろプロフィールタイトルとURLをコピーしました。