webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

box-shadow

  • box-shadow:0 10px 0 0 #777; offset-y 10px

f:id:ohta-felica:20160527175809p:plain

f:id:ohta-felica:20160527175931j:plain

  • box-shadow:0 10px 0 10px #777; spread radius 10px
  • 上下左右に10px大きいグレーの長方形を下にできた。それを上辺からはみ出さないように、左右均等に配置した。

f:id:ohta-felica:20160527180043p:plain

  • box-shadow:0 10px 0 -10px #777;
  • 10px 下にずらしても、グレーの長方形が本体よりも-10pxずつ上下左右に一回り小さいから影は見えない。

f:id:ohta-felica:20160527180951p:plain

  • box-shadow:0 10px 0 -6px #777;
  • -6pxずつ上下左右に一回り小さいグレーの長方形を10px下にずらすから、4px分だけ見える。

f:id:ohta-felica:20160527181248p:plain

  • box-shadow:0 10px 6px -6px #777;
  • 上下左右6px小さいグレーの長方形を下に10px移動する。見えている部分は高さ4px、左右は6pxずつ短い。
  • 自分にとっての、default にしよう。

f:id:ohta-felica:20160527181423p:plain

  • box-shadow:0 0 0 6px #777; 上下左右均等に6pxの縁が付く

f:id:ohta-felica:20160527223334p:plain

  • box-shadow:0 0 6px 0 #777; 上下左右均等に3pxの縁が付く。

f:id:ohta-felica:20160527223428p:plain

f:id:ohta-felica:20160527175619p:plain

 

f:id:ohta-felica:20160527172103j:plain