きなこの 愉快な 楽天日記枠&miniタグ講座

きなこの 愉快な 楽天日記枠&miniタグ講座

■画像&テキストに影を付ける



★ 画像&テキストに影をつける ★



■ IE 4.0以上対応

タグは 
filter:dropshadow(★)

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・


■ IE 5.5以上対応

タグは 
filter:progid:DXImageTransform.Microsoft.DropShadow(★) 



・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・



★に↓の値を入れてください。

<影をつけたような 立体的な感じになります>

<複数の値を入れる場合は 半角のカンマ( , )で区切って下さい>

★ (offx=15,offy=15,color=#000000,positive=1)

・・・・・・・・・・・・・・・・・・

* offx        影の右方向への長さ ( pxで指定 )
           マイナスにすると、左方向になります。

* offy        影の下方向への長さ ( pxで指定 )
           マイナスにすると、上方向になります。

* color       影の色

* positive      影を透過するか、どうかを指定します。

          ・ positive=1  透明・不透明な部分を影とします。






■ 画像に陰を入れる

<例題>
● 枠線を入れた場合



母の日2



<P style="width:250px;height:180px;border:1px blue solid;padding:30px;text-align:center;filter:dropshadow(offx=20,offy=20,color=#000000,positive=1);">
<IMG SRC="http://画像アドレス">
</P>

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

● 枠線を使わない場合



母の日2



<P style="width:250px;height:180px;padding:20px;text-align:center;filter:dropshadow(offx=20,offy=20,color=#000000,positive=1);">
<IMG SRC="http://画像アドレス">
</P>


。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


■ テキストに陰を入れる

<例題>
● 枠線を入れた場合



offx=20
offy=20
color=#000000
positive=1



<P style="width:200px;height:150px;border:1px blue solid;padding:20px;text-align:center;filter:dropshadow(offx=20,offy=20,color=red,positive=1);">
offx=20<BR>offy=20<BR>color=#000000<BR>positive=1
</P>

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・


<例題>
● 枠線を入れない場合



offx=20
offy=20
color=#000000
positive=1



<P style="width:250px;height:180px;padding:30px;text-align:center;filter:dropshadow(offx=20,offy=20,color=red,positive=1);">
offx=20<BR>offy=20<BR>color=#000000<BR>positive=1
</P>



飾り文字&陰








© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: