「007 スペクター」21世紀のボンドにスペクター
100万ポイント山分け!1日5回検索で1ポイントもらえる
>>
人気記事ランキング
ブログを作成
楽天市場
368740
HOME
|
DIARY
|
PROFILE
【フォローする】
【ログイン】
きなこの 愉快な 楽天日記枠&miniタグ講座
■画像 フィルター効果NO1
★ 画 像(フィルター効果)NO1 ★
フィルタ効果のタグを使う事で、ソフトで編集しなくても
画像を半透明にすることができます。
これなら、写真がイマイチ・・・という時でもごまかせちゃいますよ。
とても簡単です。試してみてね~。
1.透明・半透明 にしてみよう 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
設定した領域に対して、グラデーションをかける領域を設定します。
* 画像の左上端部分が X=0, Y=0
* 画像の右下端部分が X=100,Y=100 となります。
数値は、(1)~(100)までの間で、指定してくださいね。
...................................................................
★ 難しそうに見えますが、数値を色々変更してみて
ご自分で、試してみてください。
これ以上、難しい、言葉で説明は書きません。 触って慣れる事です。
大きな画像を使って、見本を作りました。
領域を設定すると、画像全てを透明にはしません。
自然な感じが出るので、試してみてくださいね♪
見本は、
(startX=35,startY=100,finishX=50,finishY=100,opacity=100,finishOpacity=30,style=1)
にしています。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
2. 線形、円形、方形 にしてみよう
「style=☆」を使います。
「style=1」
「style=2」
「style=3」
★「style=1」の 数字 の部分を変えるだけでスタイルが変わります。
解かりやすいように、バックには色をいれています。
<IMG SRC="http://画像アドレス" width="画像横幅" height="画像縦サイズ" STYLE="filter:alpha(style=1)">
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
3. グレーにしちゃおう
gray() を使います。
<IMG src="http://画像アドレスg" width="画像横幅" height="画像縦サイズ" style="filter: gray()">
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
4. 凸凹にしちゃおう NO1
(IE5.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>の間で指定してください。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
4. 凸凹にしちゃおう NO2
(IE5.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>の間で指定してください。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
6.レントゲン効果(3を反転)にします
"filter: xray()" を使います。
<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ" style="filter: xray()">
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。,
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
7. 特定の色を透明にしちゃいます
chroma(color=透明にしたい色) を使います。
元々の画像
白を抜きました
★ 見本は、白の背景を透明にしました。<#FFFFFF>を色指定の所に入れました。
<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ" style="filter:chroma(color=抜きたい色)">
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
8.色を反転して表示します
"filter: invert()" を使います。
★ これは使っている画像の(色相・明度・彩度)を
全て反転させています。
白黒は簡単に理解できますが、他の細かい色は・・?
だから、難しく考えないで、遊んでくださいね~
<IMG src="http://moto05yuki24dai11.hp.infoseek.co.jp/fuwafuwa/post_i.jpg" width="133" height="150" style="filter: invert()">
画像フィルター効果NO2へ
ジャンル別一覧
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・TV
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
人気のクチコミテーマ
パソコンを楽しむ♪
vrゴーグル 使ってみた
(2024-09-24 17:52:10)
モバイルよもやま
スマートフォンソフトウエア競争促進…
(2024-09-26 08:08:06)
楽天アフィリエイト♪
ハニーレモンバターケーキ 冷凍
(2024-09-27 15:34:03)
© Rakuten Group, Inc.
共有
Facebook
Twitter
Google +
LinkedIn
Email
Design
a Mobile Website
スマートフォン版を閲覧
|
PC版を閲覧
人気ブログランキングへ
無料自動相互リンク
にほんブログ村 女磨き
LOHAS風なアイテム・グッズ
みんなが注目のトレンド情報とは・・・?
So-netトレンドブログ
Livedoor Blog a
Livedoor Blog b
Livedoor Blog c
楽天ブログ
JUGEMブログ
Excitブログ
Seesaaブログ
Seesaaブログ
Googleブログ
なにこれオシャレ?トレンドアイテム情報
みんなの通販市場
無料のオファーでコツコツ稼ぐ方法
無料オファーのアフィリエイトで稼げるASP
ホーム
Hsc
人気ブログランキングへ
その他
Share by: