サイト内検索

...スタイルシート(css)...

スタイルシート・フィルタ

シャープな影を付ける

シャープな影を付けるフィルタは、dropshadowプロパティを指定します。
（ずらしたような影・はっきりとした影）
影の色や位置、影の反転などを指定できます。
[使い方]
［スタイルシート]
.sample{
filter:dropshadow(color=blue, offx=10, offy=10, positive=true);
}
［ｂｏｄｙの中
<img src="../img/sample.jpg" class="sample">
ＩＥのみに対応しています。
[メモ]
color・offx・offy・positiveは、W3C・CSS検証サービスでは、推奨されていません。
プロパティ名 説明
color 影の色
offx
offy		 影の移動距離（ピクセル）
offx = 右方向（マイナスは左方向）
offy = 下方向（マイナスは上方向）
positive 影の反転
0（false）=反転
1（true）=通常

サンプル

フィルタを使用していない状態
画像

<img src="../img/sample.jpg" alt="画像" width="120" height="90">

☆★文字★☆

<div style="font: bold 170% sans-serif; width: 100%;">
☆★文字★☆
</div>

《ｂｏｄｙに直接書いた場合》

影を付ける
画像

<div style="width: 100%; padding-bottom: 10px;
filter: dropshadow(color=blue);">
<img src="../img/sample.jpg" alt="画像" width="120" height="90">
</div>
☆★文字の場合★☆

<div style="font: bold 170% sans-serif; width: 100%;
padding-bottom: 10px;
filter: dropshadow(color=blue);">
☆★文字の場合★☆
</div>

影を移動させる
画像

<div style="width: 100%; padding-bottom: 30px;
filter: dropshadow(color=#c2faff, offx=20, offy=30);">
<img src="../img/sample.jpg" alt="画像" width="120" height="90">
</div>
☆★文字★☆

<div style="font: bold 170% sans-serif; width: 90%;
padding-left: 10px; padding-top: 10px;
filter: dropshadow(color=#c2faff, offx=-5, offy=-5);">
☆★文字★☆
</div>

影を反転させる
☆★文字★☆

<div style="font: bold 170% sans-serif; width: 90%;
padding: 5px 10px;
filter: dropshadow(color=#c2faff, positive=false);">
☆★文字★☆
</div>

Copyright c 2007.10.01 luc All rights reserved.