2005.06.07
テーマ： アクセス向上(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に参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
////////////////////////////////////////////////////////////////////
【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に参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
お気に入りの記事を「いいね！」で応援しよう
[【実験中】] カテゴリの最新記事
-
fontバリエーション(2) 2005.08.26 コメント(11)
-
スタイル一覧（後編） 2005.06.19 コメント(165)
Re:スタイルシート（35）(06/07)
カモミール9828
さん
Re[1]:スタイルシート（35）(06/07)
でめらら58
さん
カモミール9828さん
-----
こんにちは（＾＾）コメントありがとうございます♪
マスクの使い道は･･･
わたくしもあまり無いのではないかと思います（＞＜）
トマトはシルエット見ても解りませんしね（＾＾）クイズ!?って感じですよね。
この楽天マークもいつか見慣れるんでしょうかねぇ･･･ (2005.06.07 17:30:07)
-----
こんにちは（＾＾）コメントありがとうございます♪
マスクの使い道は･･･
わたくしもあまり無いのではないかと思います（＞＜）
トマトはシルエット見ても解りませんしね（＾＾）クイズ!?って感じですよね。
この楽天マークもいつか見慣れるんでしょうかねぇ･･･ (2005.06.07 17:30:07)
Re:スタイルシート（35）(06/07)
jasmintea7
さん
こんばんは！
楽天のマークかわったんですか？
知りませんでした(^^; ....
すっかりいつもついていけず庶事所感にしか反応できなくてすみませんm(_ _)m (2005.06.07 23:39:46)
楽天のマークかわったんですか？
知りませんでした(^^; ....
すっかりいつもついていけず庶事所感にしか反応できなくてすみませんm(_ _)m (2005.06.07 23:39:46)
Re[1]:スタイルシート（35）(06/07)
でめらら58
さん
jasmintea7さん
-----
こんばんは（＾＾）コメントありがとうございます♪
いえいえ、日記にコメントがいただけること自体が凄く嬉しいことですので、本当にありがとうございますｍ（＿＿）ｍ
楽天マークはですね、真ん中のまあるいところがアルファベットの大文字の「Ｒ」に変わったんですよ。
ちょっと野球を連想するんですけれどね（＾＾）
(2005.06.07 23:44:36)
-----
こんばんは（＾＾）コメントありがとうございます♪
いえいえ、日記にコメントがいただけること自体が凄く嬉しいことですので、本当にありがとうございますｍ（＿＿）ｍ
楽天マークはですね、真ん中のまあるいところがアルファベットの大文字の「Ｒ」に変わったんですよ。
ちょっと野球を連想するんですけれどね（＾＾）
(2005.06.07 23:44:36)
Re:スタイルシート（35）(06/07)
おはようございます(^^)♪
お体はその後 いかがでしょうか？
でめららさんもお忙しそうですものね･･･。
労わる日も必要なんでしょうね(^^;)
面白いことが出来るようになると、やってみたいことが増えて困りますね～(^^;)
先日のグラデーションがすっかりお気に入りなんです(*^^*)！
グラデーションがかかり過ぎで、見せたい部分まで隠れてしまうので、写真の撮り方など まだまだ勉強が必要のようです(^^;)
頑張りま～す(^^)♪
ありがとうございました。
(2005.06.08 06:48:09)
お体はその後 いかがでしょうか？
でめららさんもお忙しそうですものね･･･。
労わる日も必要なんでしょうね(^^;)
面白いことが出来るようになると、やってみたいことが増えて困りますね～(^^;)
先日のグラデーションがすっかりお気に入りなんです(*^^*)！
グラデーションがかかり過ぎで、見せたい部分まで隠れてしまうので、写真の撮り方など まだまだ勉強が必要のようです(^^;)
頑張りま～す(^^)♪
ありがとうございました。
(2005.06.08 06:48:09)
Re[1]:スタイルシート（35）(06/07)
でめらら58
さん
ko-harubiyoriさん
-----
おはようございます（＾＾）コメントありがとうございます♪
いつもお気遣いいただいて本当にありがとうございます。
本業の関連がちょっと忙しく、なんだかこのサイトを含めなかなかやりたいことが進まず、ちょっと凹み気味でしたが、気分転換してまた頑張りたいと思います。
そうですね（＾＾）
わたしもやってみたいこと、たくさんで困っているかもです（;大汗）
(2005.06.08 09:55:58)
-----
おはようございます（＾＾）コメントありがとうございます♪
いつもお気遣いいただいて本当にありがとうございます。
本業の関連がちょっと忙しく、なんだかこのサイトを含めなかなかやりたいことが進まず、ちょっと凹み気味でしたが、気分転換してまた頑張りたいと思います。
そうですね（＾＾）
わたしもやってみたいこと、たくさんで困っているかもです（;大汗）
(2005.06.08 09:55:58)
【毎日開催】
15記事にいいね！で1ポイント
PR
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
© Rakuten Group, Inc.
