...スタイルシート(css)...
スタイルシート・フィルタ
やわらかい影を付ける
- やわらかい影（ぼやけた感じの影）を付けるフィルタは、
shadowプロパティを指定します。 - 影の色・方向・長さの指定できます。
- [使い方]
- ［スタイルシート]
- .sample{
filter: shadow(color=blue, direction=135);
} - ［ｂｏｄｙの中］
- <img src="../img/sample.jpg" class="sample">
- ＩＥのみに対応しています。
- [メモ]
- color・directionは、W3C・CSS検証サービスでは、推奨されていません。
| プロパティ名 | 説明 | |
|---|---|---|
| color | 影の色(#カラーコード番号) | |
| direction | 影の方向（45度単位）
0=上 45=右上・・90=右・・135=右下 180=下 225=左下・・270=左・・315=左上 |
|
| strength | 数値・・・影の長さ(ピクセル) | |
| enabled | 0/false (1) | フィルタを実行しない。 |
| 1/true | フィルタを実行します。 | |
サンプル
| フィルタを使用していない状態 |
|---|
<img src="../img/sample.jpg" alt="画像" width="120" height="90"> |
|
☆★文字★☆
<div style="font: bold 170% sans-serif; width: 100%;">
|
《ｂｏｄｙに直接書いた場合》
| 影を右下につける |
|---|
|
<div style="width: 100%; padding-bottom: 10px; |
|
<div style="width: 100%;
|
|
☆★文字★☆
<div style="font: bold 170% sans-serif; width: 100%;
|
| 影を左下につける |
|---|
|
<div style="width: 90%; padding-left: 10px;
|
|
☆★文字★☆
<div style="font: bold 170% sans-serif; width: 90%;
|