[新着] Webテンプレートを仮オープンしました
dropshadow は、シャープな影を付けるフィルタです。
（ずらしたような影になります）
影の色や位置、影の反転などを指定できます。
#example {
filter: dropshadow(color=red, offx=10, offy=10, positive=true);
}
| color | 影の色 色の指定についてはスタイルシートの色指定をご覧ください。 |
|---|---|
| offx offy |
影の移動距離（ピクセル） offx = 右方向（マイナスは左方向） ｜offy = 下方向（マイナスは上方向） |
| positive | 影の反転 0（false） = 反転｜1（true） = 通常 |
【フィルタなしの状態】
<img src="image/friend.gif" alt="IMG" width="170" height="140">
<img src="image/friend2.gif" alt="IMG" width="170" height="140">
<div style="font: bold 170% sans-serif; width: 100%;">
フィルタの表示テスト
</div>
【影の色】
<div style="width: 100%; padding-bottom: 10px; filter: dropshadow(color=red);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
<div style="width: 100%; filter: dropshadow(color=red);">
<img src="image/friend2.gif" alt="IMG" width="170" height="140">
</div>
<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: dropshadow(color=red);">
フィルタの表示テスト
</div>
【影の移動】
<div style="width: 100%; padding-bottom: 30px; filter: dropshadow(color=#c0c0c0, offx=20, offy=30);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
<div style="font: bold 170% sans-serif; width: 100%; padding-left: 10px; padding-top: 10px; filter: dropshadow(color=#c0c0c0, offx=-5, offy=-5);">
フィルタの表示テスト
</div>
【影の反転】
<div style="font: bold 170% sans-serif; width: 100%; padding: 5px 10px; filter: dropshadow(color=#c0c0c0, positive=false);">
フィルタの表示テスト
</div>
