きなこの 愉快な 楽天日記枠&miniタグ講座

きなこの 愉快な 楽天日記枠&miniタグ講座

■画像フィルター効果NO2



★ 画 像(フィルター効果)NO2 ★



9.画像を上下反転させよう

"filter:flipv()" を使います






<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ" style="filter:flipv()">



。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


10.画像を左右反転させよう


style="filter:FlipH()" を使います。





<IMG src="http://画像アドレス" width="画像横幅" height="画像たてサイズ" style="filter:FlipH()">


。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。


11.画像を波状にしてみよう

style="filter:Wave()" を使います。


* style="filter:Wave()"

画像を波のようにゆがめます。




★ 下の(A)~(E) の、基本タグです。
青表示のところを、変えてください。


<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ"
style="filter:Wave()" >

...................................................................

(A)

* style="filter:Wave(freq=3)"    * style="filter:Wave(freq=15)"

波の数を設定します。(任意の数字)



filter:Wave(freq=3) filter:Wave(freq=15)



...............................................................


(B)

* style="filter:Wave(lightStrength=20)"
* style="filter:Wave(lightStrength=70)"

影の強さを設定します(範囲は弱0~100強)



filter:Wave(lightStrength=30) filter:Wave(lightStrength=70)



.................................................................

(C)

* style="filter:Wave(phase=80)"    * style="filter:Wave(phase=10)"

波の開始のおおよそを設定します
(範囲は0~360ですが、おおよそだから0~90 位で設定してみてください)。


filter:Wave(phase=10) filter:Wave(phase=80)



...................................................................

(D)

* style="filter:Wave(strength=5)"
* style="filter:Wave(strength=30)"

波の強さを設定します。



filter:Wave(strength=5) filter:Wave(strength30)





.....................................................................

(E)

■ 波の数・陰の強さ・並みの強さ をあわせてみると・・

* style="filter:Wave(freq=2,lightStrength=10,strength=2)"

↓のような感じになります。






。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

11.画像をにじんだようにしてみよう

画像をにじませたような効果を出します。

style="filter:Blur()" を使います。


★ 下の(A)~(C) の、基本タグです。
青表示のところを、変えてください


<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ"
style="filter:Blur()" >



(A) にじませる角度を設定します。 * style="filter:Blur(direction=45)"
(B) にじませの強さを設定します。 * style="filter:Blur(strength=5)"
(C) にじませの強さを設定します。 * style="filter:Blur(strength=80)"


★ 解りやすく、画像を大きくしています。


filter:Blur(direction=45)
filter:Blur(strength=5) filter:Blur(strength=80)




* style="filter:Blur(strength=100)"
にじませる数値を100にしてみると・・・





。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

13.フィルターを合成してみよう


style="width:100% ; filter:Alpha(opacity=60) Shadow(color=#efefef,direction=100) FlipV()"

のように複数のフィルタータグを組み合わせて見ます。


<半透明にして、波を付け、左右反転させる>


 filter:Alpha(opacity=60) Wave(freq=2,lightStrength=10,strength=2) FlipH()




<IMG src="http://画像アドレス" width="画像横幅" height="画像縦サイズ" style="width:50% ;filter:Alpha(opacity=60) Wave(freq=2,lightStrength=10,strength=2) FlipH()">





フィルター効果NO1へ 飾り文字・陰へ










© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: