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 を使う。

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

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

.box1{
box-shadow: 5px 5px 5px #cc0000;
}
CSSで指定する見出しデザイン box-shadow シャドウ

ドロップシャドウ 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); 
}
CSSで指定する見出しデザイン box-shadow シャドウ

ドロップシャドウ 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);
}
CSSで指定する見出しデザイン box-shadow シャドウ

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

.box4{
box-shadow: 5px 5px 5px rgba(204, 0, 0, 0.2) inset;
}
CSSで指定する見出しデザイン box-shadow シャドウ

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

.box5{
box-shadow: 0px 0px 10px rgba(204, 0, 0, 0.5) inset; 
}
CSSで指定する見出しデザイン box-shadow シャドウ

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

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

 
 

バリエーション♪

CSSで指定する見出しデザイン box-shadow シャドウ
CSSで指定する見出しデザイン box-shadow シャドウ
CSSで指定する見出しデザイン box-shadow シャドウ
CSSで指定する見出しデザイン box-shadow シャドウ
CSSで指定する見出しデザイン box-shadow シャドウ
タイトルとURLをコピーしました