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

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.06.07

スタイルシート（35）

(6)

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

カテゴリ：【実験中】

スタイルシート>>フィルタ ■chroma(透過)と■mask(マスク)
////////////////////////////////////////////////////////////////////

【filter: ***(***); で指定できる属性一覧】
○■alpha() ･･･透明・半透明・透明グラデーションの効果を表示します
×■shadow() ･･･やわらかい影をつけてくれます
×■dropshadow() ･･･シャープな影をつけてくれます
×■blur() ･･･「ブレ」の効果を表示します
×■glow() ･･･発光しているような効果を表示します
×■wave() ･･･波状に表示します

△■flipv() ･･･上下反転します
○■xray() ･･･Ｘ線写真のような表示をします
○■invert() ･･･ポジ・ネガのように色の反転をします
△■gray() ･･･白黒写真に変換します
×■chroma() ･･･特定した色だけを透過表示します
△■mask() ･･･透過部分を特定の色で塗りつぶし、不透明の部分の色を透明にします
※複数のフィルター属性を半角スペースで区切って記述することで一度に指定することもできます。
楽天広場では表示されないフィルター効果もありますので、注意が必要ですね（＞＜）
今回のサンプル
フィルターサンプル

▲直接指定の記述方法
【フィルタなしの状態】

表示例↓こんな感じですね（＾＾）

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

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

■chroma() ･･･特定した色だけを透過表示します

【透過】
□画像：黒い部分を透過しました

<img src="http://plaza.rakuten.co.jp/img/user/99/06/4429906/16.gif" alt="アクセスアップのでめらら" width="150" height="100" style="filter: chroma(color=#000000);" >
表示例↓こんな感じですね（＾＾）

□文字：赤い文字を透過しました

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

アクセスアップのでめららの赤を透過

▲直接指定の記述方法
【フィルタなしの状態】

<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>
表示例↓こんな感じですね（＾＾）

かわいいトマト

△■mask() ･･･透過部分を特定の色で塗りつぶし、不透明の部分の色を透明にします

【マスク】
□画像：黒い部分を透過しました

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

<div style="font: bold 20pt sans-serif; width: 100%; filter: mask(color=#0000FF);">
かわいいトマト
</div>
表示例↓こんな感じですね（＾＾）

かわいいトマト

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

【庶事所感】
楽天さんのマークが変わりましたね。
・・・う～ん、何だかＲの文字が真ん中にあってちょっと安っぽくなったように感じているのはわたくしだけなのでしょうか！？
わたくしは前のほうがよかったなぁ（＞＜）

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

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