CSS WEB制作

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

投稿日:2014年8月27日 更新日:

デザインを格好よくするためにシャドウを付けたりしますよね。
しかし、サイズが異なるたびに画像を背景に指定したりしなければならないのは大変です。
しかも、シャドウの幅の分だけはみ出ているということもあります。

そこで、CSS3でシャドウや光彩を付ける方法をお教えいたします。
この方法ならば汎用性が効きますので便利です。
また、シャドウが枠内からはみ出てても問題なく表示されるので、とても助かっています。

CSS3でのシャドウの指定は、縦幅や横幅が変わる度に画像を変更する必要もなく、シャドウの調整も簡単に出来るので是非ご利用して頂きたいと思います。

まず、基本的なスタイルのシャドウをご紹介致します。

-webkit-box-shadow: 3px 3px 3px 0 #999; /* Safari, Chrome */
-moz-box-shadow: 3px 3px 3px 0 #999; /* Firefox */
box-shadow: 3px 3px 3px 0 #999;

書き方はいくつかありますが、
box-shadow:横方向のずれ 横方向のずれ ぼかしの大きさ 影の広がり 影の色;
となっています。

下のように内側へのシャドウも可能です。
「inset」を追加したのみなので、とても簡単です。

-webkit-box-shadow: inset 3px 3px 5px 0 #999;
-moz-box-shadow: inset 3px 3px 5px 0 #999;
box-shadow: inset 3px 3px 5px 0 #999;

また、これを利用して光彩を作成することも出来ます。

-webkit-box-shadow: 0 0 5px 0 #999;
-moz-box-shadow: 0 0 5px 0 #999;
box-shadow: 0 0 5px 0 #999;

時にはシャドウを複数かけたい場合があるかと思います。
画像でやろうとすると大変ですが、「,」で区切るだけで可能になります。

-webkit-box-shadow: 0 0 4px 0 #F00, 0 0 12px 0 #999, 5px 5px 4px 0 #999;
-moz-box-shadow: 0 0 4px 0 #F00, 0 0 12px 0 #999, 5px 5px 4px 0 #999;
box-shadow: 0 0 4px 0 #F00, 0 0 12px 0 #999, 5px 5px 4px 0 #999;

片方を内側にシャドウをかけ、もう片方は外側にシャドウという方法もあります。
これを利用すれば簡単なボタンなんかも作成できそうです。

-webkit-box-shadow: 3px 3px 5px 0 #999, inset 0 0 10px 0 #F00;
-moz-box-shadow: 3px 3px 5px 0 #999, inset 0 0 10px 0 #F00;
box-shadow: 3px 3px 5px 0 #999, inset 0 0 10px 0 #F00;

使い勝手がよく、応用も幅広いので、とても重宝しております。
これをお読みの方も是非ご活用いただければと思います!

弊社では社内制作にこだわるHTML構築技術から、WEBサイトの正確なコーディングをご提案します。
様々な目的に応じたプランを用意しておりますので、ご興味のある方はご覧ください。

コーディング最適化

WEBサイト制作実績3,000サイト以上!
新規作成からリニューアルまで、
多様なご要望にお応えした弊社制作事例から検討したい方はこちら

制作実績を見る

-CSS, WEB制作

関連記事

WEB制作に便利!CSS3ボタンジェネレーター3選

WEB制作に便利!CSS3ボタンジェネレーター3選

もちろん使わない派の方もいるかもしれませんが、私は便利なツールがあればどんどん使っちゃいます。 WEB制作の時短にもつながる便利なジェネレーターをご紹介します。   「CSS3 Button …

起業時のホームページはどうしたらいい?必要となるシーンや作り方を解説

起業時のホームページはどうしたらいい?必要となるシーンや作り方を解説

「うちの会社もそろそろホームページを…」――起業して間もない経営者なら、誰もが一度は悩むホームページ制作。作るべきなのか、作るならいつか、予算はどれくらい必要なのか。実は、業種や事業規模に …

ホームページ制作はWordPressがおすすめ! 作成方法や必要な知識をわかりやすく解説!

ホームページ制作はWordPressがおすすめ! 作成方法や必要な知識をわかりやすく解説!

「専門的なプログラミング知識がなくても、直感的な操作でホームページを作成・管理できる」として世界中で支持されているWordPress。世界のウェブサイトの40%以上で採用されているこのシステムは、豊富 …

ホームページ制作は外注がおすすめ!メリットや制作の流れなどをわかりやすく解説

ホームページ制作は外注がおすすめ!メリットや制作の流れなどをわかりやすく解説

あなたのホームページ、本当にそれで大丈夫ですか?「見た目は良くないけど、とりあえず情報は載っているから…」そんな消極的な姿勢で、競争の激しいWEB市場で勝ち残れるでしょうか。実は、ホームページ制作の方 …

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。 今回使用するjavascriptは「zoom.js」になります。 【これまでの関連記事】 面白い動きや便利な機 …