【CSS3】ドロップシャドウやグロー(光彩)をCSSで(box-shadow)

これも折角だから改めて調べてみためもめも
ちゃんとAndriod、iPhoneで確認もした！
問題なく表示されたのぜ！(･∀･)

ドロップシャドウ(box-shadow)の基本的な書き方

「box-shadow」は名前の通りボックスに影をつけてくれるプロパティ

省略形が存在するので記述方法にはいくつかパターンがあるけど
まずは基本形から(･∀･)

box-shadow: 3px 3px 5px 0 #777;

box-shadow:横方向のずれ 横方向のずれ ぼかしの大きさ 影の広がり 影の色;

てな感じで指定できる！

• ぼかしの大きさ
  • 値が大きい程ぼんやり、値が小さい程くっきり
• 影の広がり
  • シャドウ全体の大きさの拡張・縮小
  • 「ぼかし部分の内側に作られるpadding」というイメージ
  • 負の値を設定することも可能

4つ目の値を省略すると影の広がりが0pxなのと同じ表示に
3つ目、4つ目の値を省略するとぼかしの大きさが0px扱いになり
くっきりした影になりますのぜ
ちなみに数値1つでは動作しません

実際に使用するときはこんな感じで‥

.shadow{
  -webkit-box-shadow: 3px 3px 5px 0 #777; /* Safari, Chrome用 */
  -moz-box-shadow: 3px 3px 5px 0 #777; /* Firefox用 */
  box-shadow: 3px 3px 5px 0 #777; /* CSS3 */
}

これ便利ねー

ちなみに光彩は！

おわかりかもしれませんが
横方向のずれ、横方向のずれを0にすると実現できるのぜ

.shadow{
  -webkit-box-shadow: 0 0 5px 0 #777; /* Safari, Chrome用 */
  -moz-box-shadow: 0 0 5px 0 #777; /* Firefox用 */
  box-shadow: 0 0 5px 0 #777; /* CSS3 */
}

更に内側のシャドウも(inset)

「inset」という値を追加するだけ！

.shadow{
  -webkit-box-shadow: inset 3px 3px 5px 0 #777; /* Safari, Chrome用 */
  -moz-box-shadow: inset 3px 3px 5px 0 #777; /* Firefox用 */
  box-shadow: inset 3px 3px 5px 0 #777; /* CSS3 */
}

きゃーかんたーん！(･∀･)

更にさらに複数のシャドウも

値を「,」で区切ることで複数のシャドウを設定することが可能なのぜ

なにそれ複数ってどういうこと？ってなった方
影の外にさらに影、みたいになります

.shadow{
  -webkit-box-shadow: 0 0 4px 0 #F00, 0 0 12px 0 #777, 5px 5px 5px 0 #777;
  -moz-box-shadow:  0 0 4px 0 #F00, 0 0 12px 0 #777, 5px 5px 5px 0 #777;
  box-shadow:  0 0 4px 0 #F00, 0 0 12px 0 #777, 5px 5px 5px 0 #777;
}

あと外側の影+内側の影なんてのもできる

.shadow{
  -webkit-box-shadow: 3px 3px 5px 0 #777, inset 0 0 10px 0 #fff;
  -moz-box-shadow: 3px 3px 5px 0 #777, inset 0 0 10px 0 #fff;
  box-shadow: 3px 3px 5px 0 #777, inset 0 0 10px 0 #fff;
}

これつかえばボタンとかCSSでなんとかなっちゃうね、すごいね