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

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.06.04

スタイルシート（32）

(10)

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

カテゴリ：【実験中】

スタイルシート>>filter: alpha();

filterプロパティは、Internet Explorerが独自に追加したプロパティで画像や文字に対して、影をつけたりグラデーションをかけたりいろいろな効果を表示することができます。
（対応しないブラウザでは効果が表示されませんが画像や文字はデフォルト（標準）の状態で表示はされます）
filterプロパティはDIV、SPAN、IMGなどをはじめ大抵のタグに対して指定することが可能です。
DIVタグやSPANタグにフィルタを指定する場合は、width または height プロパティでサイズを指定しておく必要があります。（または position プロパティで absolute を指定しておきます。）

【filter: ***(***); で指定できる属性】
■alpha() ･･･透明・半透明・透明グラデーションの効果を表示します

■dropshadow() ･･･シャープな影をつけてくれます
■blur() ･･･「ブレ」の効果を表示します
■glow() ･･･発光しているような効果を表示します
■wave() ･･･波状に表示します
■fliph() ･･･左右反転します
■flipv() ･･･上下反転します
■xray() ･･･Ｘ線写真のような表示をします
■invert() ･･･ポジ・ネガのように色の反転をします
■gray() ･･･白黒写真に変換します
■chroma() ･･･特定した色だけを透過表示します
■mask() ･･･透過部分を特定の色で塗りつぶし、不透明の部分の色を透明にします

楽天広場では表示されないフィルター効果もありますので、注意が必要ですね（＞＜）フィルターサンプル

■alpha() ･･･透明・半透明・透明グラデーションの効果を表示します

□style ･･･透明グラデーションのスタイル（0=指定なし、1=線形、2=円形、3=方形）
□opacity ･･･開始透明度（0[透明] ～ 100[不透明]）

□startx ･･･水平開始位置
□starty ･･･垂直開始位置
□finishx ･･･水平終了位置
□finishy ･･･垂直終了位置

▲直接指定の記述方法

【フィルタなしの状態】
□画像
<img src="画像のファイル名" alt="" width="150" height="150">
表示例↓こんな感じですね（＾＾）

□文字
<div style="font: bold 20pt sans-serif; width: 100%;">浜田省吾</div>
表示例↓こんな感じですね（＾＾）

浜田省吾

【グラデーションなし・半透明】
□画像
<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=0, opacity=30);" >
表示例↓こんな感じですね（＾＾）
浜田省吾／ROAD OUT“TRACKS”●3000円以上購入で全国送料無料！（一部地域除）

□文字
<div style="font: bold 20pt sans-serif; width: 100%; filter: alpha(style=0, opacity=30); ">浜田省吾</div>
表示例↓こんな感じですね（＾＾）

浜田省吾

【線形グラデーション・方向・位置】

□画像
・style=線形・開始=透明度0・終了=透明度100(不透明)
<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=1, opacity=0, finishopacity=100);" >
表示例↓こんな感じですね（＾＾）
浜田省吾／ROAD OUT“TRACKS”●3000円以上購入で全国送料無料！（一部地域除）

・style=線形・開始=透明度100(不透明)・終了=透明度0
<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=1, opacity=100, finishopacity=0);" >
表示例↓こんな感じですね（＾＾）
浜田省吾／ROAD OUT“TRACKS”●3000円以上購入で全国送料無料！（一部地域除）

・style=線形・開始=透明度100(不透明)・終了=透明度0・開始位置(ｘ=60,y=0)・終了位置(x=60,y=120)
<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=1, opacity=100, finishopacity=0, startx=60, starty=0, finishx=60, finishy=120);" >
表示例↓こんな感じですね（＾＾）
浜田省吾／ROAD OUT“TRACKS”●3000円以上購入で全国送料無料！（一部地域除）

・style=線形・開始=透明度0・終了=透明度100(不透明)・開始位置(ｘ=0,y=0)・終了位置(x=120,y=120)
<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=1, opacity=0, finishopacity=100, startx=0, starty=0, finishx=170, finishy=120);" >
表示例↓こんな感じですね（＾＾）
浜田省吾／ROAD OUT“TRACKS”●3000円以上購入で全国送料無料！（一部地域除）

□文字
<div style="font: bold 20pt sans-serif; width: 10em; filter: alpha(style=1, opacity=0, finishopacity=100); ">浜田省吾</div>
表示例↓こんな感じですね（＾＾）

浜田省吾

【円形グラデーション・方向】

□画像
・style=円形・開始=透明度100
<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=2, opacity=100);" >
表示例↓こんな感じですね（＾＾）

・style=円形・開始=透明度0・終了=透明度100(不透明)
<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=2, opacity=0, finishopacity=100);" >
表示例↓こんな感じですね（＾＾）
浜田省吾／ROAD OUT“TRACKS”●3000円以上購入で全国送料無料！（一部地域除）

□文字
<div style="font: bold 20pt sans-serif; width: 10em; filter: alpha(style=2, opacity=100); ">浜田省吾</div>
表示例↓こんな感じですね（＾＾）

浜田省吾

【方形グラデーション・方向】

□画像
・style=方形・開始=透明度100
<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=3, opacity=100);" >

・style=方形・開始=透明度0・終了=透明度100(不透明)
<img src="画像のファイル名" alt="" width="150" height="150" style="filter: alpha(style=3, opacity=0, finishopacity=100);" >
浜田省吾／ROAD OUT“TRACKS”●3000円以上購入で全国送料無料！（一部地域除）

□文字
<div style="font: bold 20pt sans-serif; width: 10em; filter: alpha(style=3, opacity=100); ">浜田省吾</div>
表示例↓こんな感じですね（＾＾）

浜田省吾

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

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