マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

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;

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

-CSS, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【超便利】作業効率化ができるタブ表示拡張機能

突然ですが皆様、画面がごちゃごちゃになったこと、ありませんか?   Macをお使いの方は、“タブでまとめればいいじゃん!”と思うかもしれませんが、 windowsユーザーはそうはいきませんよ …

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

角丸のコーディングは大変?CSS3で簡単に角丸を再現する方法!

今まで角丸のデザインにするには画像を背景に設定したりしていましたが、 幅や高さが変わるとそれに沿った画像を作成しなくてはならない場合があります。 それだと効率も悪く、修正もしづらいためコーディングが大 …

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

面白い動きや便利な機能をJSで実装! その4:ちょっと変わったマウスオーバーを実装してみました。

【今までにご紹介したJSの一覧】 面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成! 面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作 …

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。 web制作の仕事をず~~~っとやっていると専門的な事も基本的なことと勘違いしてしまいがちです。私もwebに触れる前は「ブラウザって何?」「 …

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材をご紹介。 http://www.markernet.co.jp/blog/2015/08/19/post-6004/ Facebook