CSSで指定する見出しデザイン　box-shadow　シャドウ

見出しに共通の基本CSS

.box1, .box2, .box3, .box4, .box5{
border:1px solid #cc0000;
padding:10px;
margin:30px 0px;
font-weight:bold;
}
.box6, .box7, .box8, .box9, .box10{
padding:10px;
margin:30px 0px;
font-weight:bold;
}

　
　

ドロップシャドウをつける時は
box-shadow : X軸のオフセット Y軸のオフセット ぼかし 色 。
色の指定は、カラー番号またはRGBa(R,G,B,0～1であらわす透明度)で。
内側にシャドウをつける時は
box-shadow : X軸のオフセット Y軸のオフセット ぼかし 色 inset を使う。

ドロップシャドウ　カラー番号で指定
box-shadow:X軸のオフセット、Y軸のオフセット、ぼかし、色（カラー番号）

.box1{
box-shadow: 5px 5px 5px #cc0000;
}

ドロップシャドウ　RGBaで指定
box-shadow:X軸のオフセット、Y軸のオフセット、ぼかし 色（RGBa）
※カラー番号 #cc0000＝RGB(204, 0, 0)　透明度0.5

.box2{
box-shadow: 5px 5px 5px rgba(204, 0, 0, 0.5);　
}

ドロップシャドウ　RGB透明度で指定
box-shadow:X軸のオフセット、Y軸のオフセット、ぼかし、色（RGBa）
※カラー番号 #cc0000＝RGB(204, 0, 0)　透明度0.2

.box3{
box-shadow: 5px 5px 5px rgba(204, 0, 0, 0.2);
}

insetを使って内側のシャドウをつける
box-shadow:X軸のオフセット、Y軸のオフセット、ぼかし 色（RGBa）、inset

.box4{
box-shadow: 5px 5px 5px rgba(204, 0, 0, 0.2) inset;
}

オフセットをなくして内側全体にシャドウをつける
box-shadow:X軸のオフセット、Y軸のオフセット、ぼかし、色（RGBa）、inset

.box5{
box-shadow: 0px 0px 10px rgba(204, 0, 0, 0.5) inset;　
}

内側全体にシャドウをつけて基本の枠線を消してみたもの。

.box6{
box-shadow: 0px 0px 10px rgba(204, 0, 0, 0.5) inset;　
}

　
　

バリエーション♪