マーカーネット株式会社

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

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

関連記事

さまざまなレイアウトの工夫その①

さまざまなレイアウトの工夫その①

キレイなウェブ制作のためには色んな要素が必要となります。「フォント」「色」「レイアウト」「写真」「バランス」「テーマ」等々!今回はその中でも「レイアウト」ついて少し説明させていただきたいと思います。で …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xでは、404 NOT Foundエラーが発生した場合、 デフォルトでは、 app/View/Errors/error400.ctp の内容が表示されます。 サイトによっては、 40 …

【Illustrator】基本図形で出来ちゃう!ハートマークの作り方

こんばんは、新人Aです。 今日は、Illustratorでハートを作る方法についてお話します! まぁ、素材サイトさんからデータをお借りしちゃえばそれで済む話なのですが… 理想の形が見当たらない!という …

デザイナーなら必ず見ておきたいWEBデザイン(可愛い系統)

デザイナーなら必ず見ておきたいWEBデザイン(可愛い系統)

資生堂のマシェリ公式HP http://www.shiseido.co.jp/macherie/index.html リボンのあしらいと女性が好みそうなお花やフルーツなどをモチーフにしていて、 沢山の …