■画像 フィルター効果ＮＯ１
★ 画 像（フィルター効果）ＮＯ１ ★
フィルタ効果のタグを使う事で、ソフトで編集しなくても
画像を半透明にすることができます。
これなら、写真がイマイチ･･･という時でもごまかせちゃいますよ。
とても簡単です。試してみてね～。
１．透明・半透明 にしてみよう NO1
（opacity=☆）を使います。
これは、（opacity=50）です。
『alph()』は、物を透けさせる効果があります。
数字は『0～100』まで変えられます。
数字が小さい方が透けて表示されます。
|
|
|
|
|---|---|---|---|
|
opacity=10
|
opacity=40 | opacity=70 | opacity=100 |
<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ" style="filter: alpha(opacity=数字)">
★～☆～★～☆～★～☆★～☆～★～☆～★～☆★～☆～★～☆～★～☆★～☆～★～☆～★～☆
透明・半透明 にしてみよう NO2
＊ 下のタグを使って、画像の透明度に変化をつけてみます。
<IMG SRC="http://画像アドレス" width="画像横幅" height="画像縦サイズ" STYLE="filter:alpha(startX=25,startY=100,finishX=55,finishY=100,opacity=100,finishOpacity=10,style=1)
＊ opacity
opacityを使用すると、透明度を指定できます。
opacityが 100% (1.00) 未満の値に設定されると、
境界線を含むフォーム全体の透明度が上がります。
opacityが 0% (0.00) の値に設定されると、
フォームは完全に見えなくなります。
opacityを使用して、さまざまな透明度を指定することや、
フォームを徐々に見えるようにしたり、
見えなくなるようにしたりする効果を指定できます。
たとえば、フォームが徐々に見えるようにするためには、
Opacity を 0% (0.00) に設定し、
finishOpacity を 100% (1.00) に達するまで、数値を徐々に増やしていきます。
反対に、徐々に見えなくするには、
Opacity を 100% (1.00) に設定し、
finishOpacity を 0% (0.00) に達するまで、数値を徐々に減らしていきます。
| opacity | finishOpacity |
|---|---|
| 透明度の開始位置 | 透明度の終了位置 |
＊ startX,finishX startY,finishY
設定した領域に対して、グラデーションをかける領域を設定します。
＊ 画像の左上端部分が Ｘ＝０， Ｙ＝０
＊ 画像の右下端部分が Ｘ＝１００，Ｙ＝１００ となります。
数値は、(１)～(１００)までの間で、指定してくださいね。
...................................................................
★ 難しそうに見えますが、数値を色々変更してみて
ご自分で、試してみてください。
これ以上、難しい、言葉で説明は書きません。 触って慣れる事です。
大きな画像を使って、見本を作りました。
領域を設定すると、画像全てを透明にはしません。
自然な感じが出るので、試してみてくださいね♪
見本は、
(startX=35,startY=100,finishX=50,finishY=100,opacity=100,finishOpacity=30,style=1)
にしています。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
２. 線形、円形、方形 にしてみよう
「style=☆」を使います。
|
|
|
|---|---|---|
|
「style=1」
|
「style=2」 | 「style=3」 |
★「style=1」の 数字 の部分を変えるだけでスタイルが変わります。
解かりやすいように、バックには色をいれています。
<IMG SRC="http://画像アドレス" width="画像横幅" height="画像縦サイズ" STYLE="filter:alpha(style=1)">
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
３. グレーにしちゃおう
gray() を使います。
<IMG src="http://画像アドレスg" width="画像横幅" height="画像縦サイズ" style="filter: gray()">
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
４. 凸凹にしちゃおう ＮＯ１
（ＩＥ5.5以上が必要です）
"filter:progid:DXImageTransform.Microsoft.Engrave(bias=0.8)"
を使います。
<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ" style="filter:progid:DXImageTransform.Microsoft.Engrave(bias=0.8)">
bias=0.8 は 凹む深さです。
＜-1.0～1.0＞の間で指定してください。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
４. 凸凹にしちゃおう ＮＯ２
（ＩＥ5.5以上が必要です）
"filter: progid:DXImageTransform.Microsoft.Emboss(bias=0.8)"
を使います。
<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ" style="filter: progid:DXImageTransform.Microsoft.Emboss(bias=0.8)">
bias=0.8 は 凹む深さです。
＜-1.0～1.0＞の間で指定してください。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
６．レントゲン効果（３を反転）にします
"filter: xray()" を使います。
<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ" style="filter: xray()">
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。, 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
７. 特定の色を透明にしちゃいます
chroma(color=透明にしたい色) を使います。
|
|
|---|---|
| 元々の画像 | 白を抜きました |
★ 見本は、白の背景を透明にしました。＜#FFFFFF＞を色指定の所に入れました。
<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ" style="filter:chroma(color=抜きたい色)">
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
８．色を反転して表示します
"filter: invert()" を使います。
★ これは使っている画像の（色相・明度・彩度）を
全て反転させています。
白黒は簡単に理解できますが、他の細かい色は・・？
だから、難しく考えないで、遊んでくださいね～
<IMG src="http://moto05yuki24dai11.hp.infoseek.co.jp/fuwafuwa/post_i.jpg" width="133" height="150" style="filter: invert()">
画像フィルター効果ＮＯ２へ
ジャンル別一覧
人気のクチコミテーマ
-
-
- 家電よもやま
- ［楽天市場］「有機ＥＬ」「４Ｋテレ…
- (2024-06-24 17:35:47)
-
-
-
- ブログ更新しました♪
- ６月２６日 記事更新致しました。
- (2024-06-26 21:43:13)
-
-
-
- 【楽天市場】新製品の激安 価格比較…
- Có nên mua máy lọc nước ion kiềm
- (2022-12-29 13:40:56)
-
© Rakuten Group, Inc.
