box-shadow と drop-shadow
写真にダイレクトに影をつけることができないので影をつけるボックスに指定します 「box-shadow」
ぼかしのない影を作る
CSS
.kage1 {
box-shadow: 4px 4px;
}
HTML
<img class="kage1" src="uma.jpg" alt="うま">
ぼかしのない影を反対側に作る
CSS
.kage-1 {
box-shadow: -4px -4px;
}
HTML
<img class="kage-1" src="uma.jpg" alt="うま">
影の色を変える
CSS
.kage2 {
box-shadow: 6px 6px royalblue;
}
HTML
<img class="kage2" src="uma.jpg" alt="うま">
影のカラーをグレイにしてぼかす（Blur）
CSS
.kage3 {
box-shadow: 3px 3px 10px gray;
}
HTML
<img class="kage3" src="uma.jpg" alt="うま">
上下左右対称（４点）に影をぼかす
CSS
.kage4 {
box-shadow: 0 0 10px gray;
}
HTML
<img class="kage4" src="uma.jpg" alt="うま">
スナップ写真風にアレンジする
CSS
.kage5 {
box-shadow: 5px 5px 10px gray;
padding: 10px;
border: solid 1px #666;
}
HTML
<img class="kage5" src="uma.jpg" alt="うま">
ボックスに影をつける
ボックス
CSS
.pink-box {
padding: 20px;
background: #ffe4e1;
width:320px;
box-shadow: 3px 3px 5px gray;
}
HTML
<div class="pink-box">
<p>ボックス</p>
</div>
背景が透明の場合 ボックスシャドウ
CSS
.kage6 {
box-shadow: 3px 3px 8px gray;
}
HTML
<img class="kage6" src="bear.png" alt="くま">
背景が透明の場合 ドロップシャドウ
CSS
.kage7 {
filter: drop-shadow(2px 4px 8px gray);
}
HTML
<img class="kage7" src="bear.png" alt="くま">
背景が透明の場合 ぼかしを入れないドロップシャドウ
CSS
.kage8 {
filter: drop-shadow(3px 3px #ec6d71);
}
HTML
<img class="kage8" src="bear.png" alt="くま">