テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.06.08

スタイルシート（36）

(11)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

スタイルシート>>フィルタ ■shadow() ■dropshadow() ■blur() ■glow() ■wave()

今回の日記でフィルタは終わりです。
自分のパソコンで見て、楽天広場では効果が確認できなかった残りのフィルタたちです（＞＜）

今回のサンプル
フィルターサンプル

【フィルタなしの状態】
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">
表示例↓こんな感じですね（＾＾）

<div style="font: bold 20pt sans-serif; width: 100%;">

</div>
表示例↓こんな感じですね（＾＾）

アクセスアップのでめらら

■shadow() ･･･やわらかい影をつけてくれます

filter: shadow(color=影色, direction=角度); }
□color 影の色
□direction 影の方向（45度単位：0=上、45=右上、90=右、135=右下、180=下、225=左下、270=左、315=左上）

<div style="width: 100%; padding-bottom: 10px; filter: shadow(color=blue, direction=135); ">
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">
</div>

<div style="font: bold 20pt sans-serif; width: 100%; padding-bottom: 10px; filter: shadow(color=blue, direction=135); ">
アクセスアップのでめらら
</div>
表示例↓こんな感じですね（＾＾）

アクセスアップのでめらら

■dropshadow() ･･･シャープな影をつけてくれます

filter: dropshadow(color=影色, offx=左右, offy=上下, positive=反転);
□color 影の色
□offx（影の左右の位置（ピクセル：整数）
□offy（影の上下の位置
□positive 影の反転（0（false） = 反転、1（true） = 通常）

<div style="width: 100%; padding-bottom: 30px; filter: dropshadow(color=#C0C0C0, offx=20, offy=30); ">
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">
</div>
表示例↓こんな感じですね（＾＾）

<div style="font: bold 20pt sans-serif; width: 100%; padding: 5px 10px; filter: dropshadow(color=#C0C0C0, positive=false); ">
アクセスアップのでめらら
</div>
表示例↓こんな感じですね（＾＾）

アクセスアップのでめらら

■blur() ･･･「ブレ」の効果を表示します

filter: blur(add=true, direction=90, strength=10);
□add 元画像をブレに重ねるかどうか（0（false） = 重ねない、1（true） = 重ねる）
□direction ブレの方向（45度単位：0=上、45=右上、90=右、135=右下、180=下、225=左下、270=左、315=左上）
□strength ブレの距離（ピクセル）

<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100" style="filter: blur(direction=0, strength=30);" >
表示例↓こんな感じですね（＾＾）

<div style="font: bold 20pt sans-serif; width: 100%; filter: blur(add=false, direction=90, strength=15); ">
アクセスアップのでめらら
</div>
表示例↓こんな感じですね（＾＾）

アクセスアップのでめらら

■glow() ･･･発光しているような効果を表示します

filter: glow(color=光の色, strength=100);
□color 光の色
□strength 光の強さ（0（弱）～ 254（強））

<div style="width: 100%; padding: 20px; filter: glow(color=#FFFF00, strength=30); ">
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">
</div>
表示例↓こんな感じですね（＾＾）

<div style="font: bold 20pt sans-serif; width: 100%; padding: 20px; filter: glow(color=red, strength=20); ">
アクセスアップのでめらら
</div>
表示例↓こんな感じですね（＾＾）

アクセスアップのでめらら

■wave() ･･･波状に表示します

filter: wave(add=false, freq=3, strength=5, lightstrength=30, phase=50);
□add 元画像を波に重ねるかどうか（0（false） = 重ねない、1（true） = 重ねる）
□freq 波の数（数値）
□strength 波の横幅（数値）
□lightstrength 光の強さ（0（弱）～ 100（強））
□phase 波の開始位置（0 ～ 100）

<div style="width: 100%; padding-left: 10px; filter: wave(strength=5, lightstrength=50, phase=75); ">
<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/43.gif" alt="トマト透過" width="100" height="100">
</div>
表示例↓こんな感じですね（＾＾）

<div style="font: bold 20pt sans-serif; color: red; width: 100%; padding-left: 10px; filter: wave(freq=1, strength=3, lightstrength=50); ">
アクセスアップのでめらら
</div>
表示例↓こんな感じですね（＾＾）

アクセスアップのでめらら

*****************************************************

【庶事所感】
楽天広場のページにInfoseekマネーの株価の推移が3件まで表示できるようになりました。
･･･流行っているのかなぁ、「株」
わたくしの知っている方々はことごとく株で損をした方ばかりです。
いっとき利益を得ることがあっても、減らした回数が多く、証券会社への手数料で凹んでいる方ばかりです。
ほかのことでもそうでしょうが、本当に儲かっていらっしゃるのはほんの少しの方なのかも知れませんね。

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ