マーカーネット株式会社

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

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

関連記事

参考になるスマホサイト

皆さん・・・ こんばんは・・・・ webデザインを新人デザイナーKです・・・ 何故私がこんなに落ち込んでいるかというと・・・最近、5kgも太っ”#$#”$!!! ことではなく! 最近、スマホのデザイン …

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンクチェックしていますか? マニュアルでチェックするとたいへんですよね。 WordPressには自動で定期的にリンク切れをチェックしてくれる 便利なプラグインがございます。 その名もズバリ、「Bro …

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …

jQueryを使ってみよう【開閉式メニューを作る編】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 jQueryの便利な使い方をご紹介します。 jQu …

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

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

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2- どうも、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて紹介していきたいと思います。 画 …