~ LuNa`MoOnFanG...'s profileღ♥¸.·*´¯`~ รวม Icon & Li...BlogLists Tools Help

Blog


    February 08

    การใช้ <IMG> และการเพิ่ม effect ให้กับภาพ

    การใช้ <IMG> และการเพิ่ม effect ให้กับภาพ
     
    รูปแบบ ปกติ ที่เราใช้กัน คือ <IMG src="Url ของภาพ"> 
    หรือถ้าเพิ่มการกำหนด ขนาดไปด้วยก็เป็น
     <IMG height=ความสูง src="Url ของภาพ" width=ความกว้าง>
     
    <IMG height=288 src="http://img207.imageshack.us/img207/572/wpap200611651hy.jpg" width=248>
     
    แบบปกติ

      

    แนะนำการเพิ่ม effect ต่างๆ สีแดง คือ ชุดคำสั่งที่เพิ่มเข้าไป  และ สีชมพู คือ url ของภาพ

     

     

    ทำภาพแบบ ขาว - ดำ

    โดยการเพิ่มคำสั่ง
    style="FILTER: gray()"


    <IMG style="FILTER: gray()" height=288 src="http://img207.imageshack.us/img207/572/wpap200611651hy.jpg" width=248>

     

      

    กลับด้าน ซ้าย - ขวา

    <IMG style="FILTER: fliph()" height=288 src="http://img207.imageshack.us/img207/572/wpap200611651hy.jpg" width=248>

     

      

    ทำให้ความเข้มของสี ไล่จากซ้าย ไปขวา

    Opacity และ  FinishOpacity
    คือค่าความเข้มของภาพ ปรับเพิ่ม-ลดได้

    <IMG style="FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=1)" height=288 src="http://img207.imageshack.us/img207/572/wpap200611651hy.jpg" width=248>

      

    ทำให้ความเข้มสี ไล่จากขวา ไปซ้าย

    อันนี้จะเหมือนอันบน แต่ว่า
    เปลี่ยนตรงค่าความเข้มของภาพ

    <IMG style="FILTER: Alpha(Opacity=0,FinishOpacity=100,Style=1)" height=288 src="http://img207.imageshack.us/img207/572/wpap200611651hy.jpg" width=248>

      

    ไล่สีจากกลางภาพ ไปขอบภาพ

    ตรง Opacity กับ FinishOpacity
    ปรับได้เหมือนกัน

    <IMG style="FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=3)" height=288 src="http://img207.imageshack.us/img207/572/wpap200611651hy.jpg" width=248>

      

    ไล่ความเข้มของสี เป็นวงกลม

    ตรง Opacity กับ FinishOpacity
    ปรับได้เหมือนกัน

    <IMG style="FILTER: Alpha(Opacity=100,FinishOpacity=0,Style=2)" height=288 src="http://img207.imageshack.us/img207/572/wpap200611651hy.jpg" width=248>

     

     

    Credit : นู๋นุช

    February 07

    ตัวอักษรจ้า !!

    1. <FONT style="FONT-SIZE: 20pt; FILTER: shadow(color=#000000); WIDTH: 100%; FONT-FAMILY: " color= #FF0066><B>ღ ~ LuNa`MoOnFanG ~ ღ</B></FONT>

    ღ ~ LuNa`MoOnFanG ~ ღ

     

    2. <FONT style="FONT-SIZE: 20pt; FILTER: glow(color=#000000); WIDTH: 100%; FONT-FAMILY: " color=#FF0066><B>ღ ~ LuNa`MoOnFanG ~ ღ</B></FONT>

     

    ღ ~ LuNa`MoOnFanG ~ ღ

     

    3. <FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 30px; FILTER: blur(add=1, direction=40,strength=10); WIDTH: 200px" color=#FF0066>LuNa`MoOnFanG</FONT>

    LuNa`MoOnFanG

    4. <DIV style="FILTER: glow(color=#000000,strength=6); COLOR: #FF004D; HEIGHT: 10px"><FONT size=6>ღ ~ LuNa`MoOnFanG ~ ღ</FONT></DIV>

     

    ღ ~ LuNa`MoOnFanG ~ ღ

     

    5. <P><FONT style="FONT-SIZE: 25pt; FILTER: alpha(opacity=100,style=1); WIDTH: 50%; COLOR: #6a5acd; LINE-HEIGHT: 100%"><B>LuNa`MoOnFanG</B> </FONT></P>

    LuNa`MoOnFanG

     

    Blur
    <span style="width: 150; height: 50; font-size: 24px; font-family: verdana; color: #FFDAFC; filter: shadow(color=#99FFCC, direction=200)"><b>Blur</b></span>

    Dropshadow
    <span style="width: 150; height: 50; font-size: 24px; font-family: verdana; color: #FF63A5; filter: dropshadow(Color=#FFFFFF, OffX=2, OffY=2, positive=2)">Dropshadow</span>

    Flip
    <span style="width: 150; height: 50; font-size: 24px; font-family: verdana; color: #FF9AC5; filter: flipv">Flip</span>

    Glow
    <span style="width: 150; height: 50; font-size: 24px; font-family: verdana; color: #ff00cc; filter: glow(color=#000000, strength=10)">Glow</span>

    Opacity
    <span style="width: 150; height: 50; font-size: 24px; font-family: verdana; color: #ffffff; filter: alpha(opacity=100, finishopacity=0, style=1, startX=0, startY=0, finishX=200, finishY=0)">Opacity</span>

    Shadow Blur
    <span style="width: 150; height: 50; font-size: 24px; font-family: verdana; color: #ff00cc; filter: blur(add = 1, direction = 220, strength = 10)">Shadow Blur</span>

    Wave
    <span style="width: 150; height: 50; font-size: 24px; font-family: verdana; color: #ff00cc; filter: wave(add=0, freq=1, lightstrength=20, phase=10, strength=10)">Wave</span>

    Glowing Text Link
    <span style="position:relative; width:175; height:24; filter:glow(color=#00ff00,strength=2)"> <A href="YOUR LINK">Glowing Text Link</A></SPAN>

    August 17

    ღ♥¸.·*´¯`~ Icon & Pic ~´¯`*·.¸♥ღ

     WeLcOmE to NuMb's IcoN
     
    *.:。✿*゚‘゚・✿.。.:* *.:。✿*゚’゚・✿.。.:* *.:。✿*゚¨゚✎・ ✿.。.:* *.:。✿*゚¨゚✎・ ✿.。.:* «-(¯`v´¯)«--
     
    ..·.¸¸·´¯`·.¸¸.ஐ ...¤¸¸.·´¯`·.¸·.>>--»
     
    ❃❂❁❀✿✾✽✼✻✺✹✸✷ ✶✵✴❄❅❆❇❈❉❊❋❖❤❥❦❧⓪
     
    ๑۩۞۩๑ ♟ ☼ ☀ o O # 【】ψ▓ ► ◄ ▒ ░ ♀♂ √ ╮╭ ╯╰ ァ ┱ ┲ ☆ ★ ♫ ♬
     
    (◡‿◡✿) (◕‿◕✿) (◕〝◕) •.★*... ...*★.• ·*.:。✿✲-·(¯`°.•°•.★* *★ .•°•.°´¯)
     
    *¤°•★ •:*´¨`*:•.☆۩ ۞ ۩ ۩ ۞ ۩☆•:*´¨`*:•.
     
    ⊕ ¤ ☼ o O ♋ ㊝ ► ◄ ✿ ﻬ ஐ ✲ ღ ☃ ■↔ ↕ ↘╬『』☃ ❣·•● ➸ ❝❞ ﹌
     
    ✎ ✟ ➹ ❀ ☂ ♨ ☎ ☏ ★ △ ▲ ♠ ♣ ♧ ∵ ∴ ∷ ♟ # ✖ ♂ ♀
     
    ●▂●  ●0●  ●︿●  ●ω●  ●﹏●  ●△●  ●▽● ⊙▂⊙  ⊙0⊙ ⊙︿⊙ 
     
    ⊙ω⊙ ⊙﹏⊙ ⊙△⊙ ⊙▽⊙ ◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐

    ღ♥¸.·*´¯`~ Icon & Pic ~´¯`*·.¸♥ღ

     

     

    xxxxx

              

     

     

                     

     

               

     

     

     

     

    x1pko.gif