ホーム > 初心者向きタグ講座 > 影の作り方2

影の作り方2

前のページは影を付けるというか立体的にしただけなので、
今度こそ影の付け方を説明致します(^^;

影の枠1
影の枠2
影の枠3

3つほどありますが、
1は普通の影を付けるだけのタイプ。
2は影の部分をグラデーションにしています。(IE専用)
3は全体的ににじませています。(IE専用)
タグはCSSでまとめるのが良いかと思われます(^^;

影の枠1(width:枠の大きさを指定 background-color:影の色 border:枠の太さと色指定)

<div style="width: 100px; background-color: #ff0000; margin: 20px 10px 10px 20px;"><div style="width: 100px;border: solid 1px #ff0000;background: #ffffff;position: relative;margin: -10px -10px 10px -10px;padding: 10px;">
影の枠1</div></div>

影の枠2(opacity=グラデーション始まり指定 finishopacity=グラデーション終り指定)

<div style="width: 100px; background-color: #ff0000; margin: 20px 10px 10px 20px; filter: alpha(opacity=10,finishopacity=200,style=1"><div style="width: 100px; border: solid 1px #ff0000; background: #ffffff; position: relative;margin: -10px -10px 10px -10px; padding: 10px;">
影の枠2</div></div>

影の枠3(direction=にじませる角度 strength=にじませる強さ)

<div style="width: 100px; background-color: #ff0000; margin: 20px 10px 10px 20px; filter: blur(direction=300,strength=30"><div style="width: 100px; border: solid 1px #ff0000; background: #ffffff; position: relative;margin: -10px -10px 10px -10px; padding: 10px;">
影の枠3</div></div>

説明としましては、
margin(上、右、下、左の順番)で場所をずらしておいて、
positionで相対位置に置くというものです。
ぼかしやグラデーションはfilterを使っています。(IE専用です)

僕でも出来た在宅アルバイト! ←のように文字にも使う事ができます。

影が付く文字(offx=右 offy=下 -(マイナス)指定すると逆になります。)

<table>
<tr><td style="filter:DropShadow(offx=3,offy=3,color=#c0c0c0)">
<font size="5" color="#ff0000"><b>消して文字を入れてください</b></font>
</td>
</tr>
</table>

ホーム > 初心者向きタグ講座 > 影の作り方2

検索
当サイト使用のサーバー
サイト情報
メタ情報

▲ページTOPへ