マーカーネット株式会社

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

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

関連記事

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

WYSIWYGエディタCKEditor + KCFinderで画像の保存先を動的に指定する方法。

ブログの記事の編集などにWYSIWYGエディタCKEditor + KCFinderを導入しているサイトでログインするユーザごとに画像のアップロード先を切り替えたい状況がございます。 その方法を紹介し …

【コーダーには常識!?】あなたのコーディングをチェック!

【コーダーには常識!?】あなたのコーディングをチェック!

コーディングをしたけど、エラーや間違いがないか不安に感じたりしませんか? リンク切れやソースの間違いなどを一つ一つ調べていくのは大変です。 そこで、コーディングエラー、リンク切れなどを調べてくれるお勧 …

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-3-

約3週間に1回の登場になりますが、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて、続いて紹介していきたいと思います。 今回は最終回となりますので、最後まで読んでいただけれ …

Phalcon PHPフレームワーク試しました

Phalcon PHPフレームワーク試しました

Phalcon(http://phalconphp.com/ja/)フレームワークは、PHPエクステンションとして利用する非常に高速なフレームワークとのことです。 動作確認までの手順です。 1. Ph …

戦略なきWEBブランディングは効果なし

戦略なきWEBブランディングは効果なし

ブランディングとうい視点で、日本酒について考えてみたいと思います。 旅人・中田英寿 たどり着いた先は「日本酒ビジネス」のなぜ? “旅人”のたどりついた先は酒蔵だった。元サッカー日本代表の中田英寿(37 …