ProfileKEEKYOの第二空间站PhotosBlogLists Tools Help

Blog


    04 December

    文字特效整理--使用濾鏡效果


    使用濾鏡效果:

    (既然為整理就不多說了...如何敘述和各樣式參數請參考圖片濾鏡效果那一篇,這裡僅呈現範例)
    (所以只要把字改成你要的就行了...有多行的也能自行在MSN Spaces調整大小)

    另外要知道的是...一般效果皆適用在<font>與<div>,<div>再設定多行同效果較為簡便。
     

    A.半透明合成(多行):

    範例:

    HTML(Style為2圓形):

    <div style="height:126px;font-size:9pt;line-height:9pt;filter:Alpha(opacity=100,finishOpacity=0,style=2); width:199px">
    顯示效果預覽文字
    顯示效果預覽文字<br>
    顯示效果預覽文字
    顯示效果預覽文字<br>
    顯示效果預覽文字
    顯示效果預覽文字<br>
    顯示效果預覽文字
    顯示效果預覽文字<br>
    顯示效果預覽文字
    顯示效果預覽文字<br>
    顯示效果預覽文字
    顯示效果預覽文字<br>
    顯示效果預覽文字
    顯示效果預覽文字<br>
    顯示效果預覽文字
    顯示效果預覽文字<br>
    顯示效果預覽文字
    顯示效果預覽文字<br>顯示效果預覽文字
    顯示效果預覽文字</div>
     


    結果:(大小可以自行修改)

    顯示效果預覽文字顯示效果預覽文字
    顯示效果預覽文字顯示效果預覽文字
    顯示效果預覽文字顯示效果預覽文字
    顯示效果預覽文字顯示效果預覽文字
    顯示效果預覽文字顯示效果預覽文字
    顯示效果預覽文字顯示效果預覽文字
    顯示效果預覽文字顯示效果預覽文字
    顯示效果預覽文字顯示效果預覽文字
    顯示效果預覽文字顯示效果預覽文字
    顯示效果預覽文字顯示效果預覽文字

    HTML:

    <div style="filter:Alpha(opacity=100,finishOpacity=25,style=2); width:779px;height:353px;font-size:14pt;line-height:15pt;font-family:Verdana" align=center>
    內容省略</div>

    結果:

    複製起點→●



    My love is as a fever, longing still
    For that which longer nurseth the disease,
    Feeding on that which doth preserve the ill,
    ζ
    My thoughts and my discourse as madmen's are,
    At random from the truth vainly express'd;
    For I have sworn thee fair and thought thee bright,
    Who art as black as hell, as dark as night.


    ●←複製終點

    B.詼諧、X光效果、色彩對換(互補色)(可用但無意義就不列出來了)

    C.翻轉:

    左右翻轉:
    <font style="filter:FlipH;height:10pt;">顯示效果預覽文字</font>
    結果:

    顯示效果預覽文字

    上下翻轉:
    <font style="filter:FlipV ;height:10pt;">顯示效果預覽文字</font>
    結果:

    顯示效果預覽文字

    盜版....XD

     

    D.發光效果:(MSN Spaces 居然比 FrontPage 還強,編輯就看得到效果了喔)

    線上顏色選擇器 1. 4096 Color Wheel   2. Schemer  3. Wellstyled

    HTML:

    <font style="filter:Glow(color=發光顏色;strength=發光強度);height:1px" face=字體  color=文字顏色 size=文字大小>顯示效果預覽文字</font>

    <div style="filter:Glow(■);height:◆px">顯示效果預覽文字</div>

    ■參數

    color             -->發光顏色(深色系列效果尤佳)
    strength        -->發光強度(0+)

    範例 1:

    HTML:

    <font style="FILTER: glow(color=#FF0000,strength=3); HEIGHT: 1px;" face="標楷體" color="#ffffff" size="4">什麼顏色最好看?</font>
    <br>
    <font style="FILTER: glow(color=#FF0080,strength=3); HEIGHT: 1px;" face="標楷體" color="#ffffff" size="4">什麼顏色最好看?</font>
    <br>
    <font style="FILTER: glow(color=#FF8000,strength=3); HEIGHT: 1px;" face="標楷體" color="#ffffff" size="4">什麼顏色最好看?</font>
    <br>
    <font style="FILTER: glow(color=#008080,strength=3); HEIGHT: 1px;" face="標楷體" color="#ffffff" size="4">什麼顏色最好看?</font>
    <br>
    <font style="FILTER: glow(color=#008000,strength=3); HEIGHT: 1px;" face="標楷體" color="#ffffff" size="4">什麼顏色最好看?</font>
    <br>
    <font style="FILTER: glow(color=#0000FF,strength=3); HEIGHT: 1px;" face="標楷體" color="#ffffff" size="4">什麼顏色最好看?</font>
    <br>
    <font style="FILTER: glow(color=#8000FF,strength=3); HEIGHT: 1px;" face="標楷體" color="#ffffff" size="4">什麼顏色最好看?</font>
    <br>
    <font style="FILTER: glow(color=#000000,strength=3); HEIGHT: 1px;" face="標楷體" color="#ffffff" size="4">什麼顏色最好看?</font>

     

    結果:

    什麼顏色最好看?
    什麼顏色最好看?
    什麼顏色最好看?
    什麼顏色最好看?
    什麼顏色最好看?
    什麼顏色最好看?
    什麼顏色最好看?
    什麼顏色最好看?

    範例 2:

    HTML:

    <font style="FILTER: glow(color=#FF0000,strength=2); HEIGHT: 1px;" face="Verdana" color="#ffffff" size="3">Life will find the way!</font>
    <br>
    <font style="FILTER: glow(color=#FF0080,strength=2); HEIGHT: 1px;" face="Verdana" color="#ffffff" size="3">Life will find the way!</font>
    <br>
    <font style="FILTER: glow(color=#FF8000,strength=2); HEIGHT: 1px;" face="Verdana" color="#ffffff" size="3">Life will find the way!</font>
    <br>
    <font style="FILTER: glow(color=#008080,strength=2); HEIGHT: 1px;" face="Verdana" color="#ffffff" size="3">Life will find the way!</font>
    <br>
    <font style="FILTER: glow(color=#008000,strength=2); HEIGHT: 1px;" face="Verdana" color="#ffffff" size="3">Life will find the way!</font>
    <br>
    <font style="FILTER: glow(color=#0000FF,strength=2); HEIGHT: 1px;" face="Verdana" color="#ffffff" size="3">Life will find the way!</font>
    <br>
    <font style="FILTER: glow(color=#8000FF,strength=2); HEIGHT: 1px;" face="Verdana" color="#ffffff" size="3">Life will find the way!</font>
    <br>
    <font style="FILTER: glow(color=#000000,strength=2); HEIGHT: 1px;" face="Verdana" color="#ffffff" size="3">Life will find the way!</font>


     

    結果:

    Life will find the way!
    Life will find the way!
    Life will find the way!
    Life will find the way!
    Life will find the way!
    Life will find the way!
    Life will find the way!
    Life will find the way!

    範例 3 (強制設字型大小):

    HTML:

    <FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#4A7AC9,strength=2); COLOR: #ffffff; HEIGHT: 9pt"><br>
    &nbsp;顯示效果預覽文字</FONT>
    <FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF0000,strength=2); COLOR: #ffffff; HEIGHT: 9pt"><br>
    &nbsp;顯示效果預覽文字</FONT>
    <FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF0080,strength=2); COLOR: #ffffff; HEIGHT: 9pt"><br>
    &nbsp;顯示效果預覽文字</FONT>
    <FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#FF8000,strength=2); COLOR: #ffffff; HEIGHT: 9pt"><br>
    &nbsp;顯示效果預覽文字</FONT>
    <br>
    <FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#008080,strength=2); COLOR: #ffffff; HEIGHT: 9pt"><br>
    &nbsp;顯示效果預覽文字</FONT>
    <FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#0000FF,strength=2); COLOR: #ffffff; HEIGHT: 9pt"><br>
    &nbsp;顯示效果預覽文字</FONT>
    <FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#8000FF,strength=2); COLOR: #ffffff; HEIGHT: 9pt"><br>
    &nbsp;顯示效果預覽文字</FONT>
    <FONT style="FONT-SIZE: 9pt; FILTER: Glow(color=#000000,strength=2); COLOR: #ffffff; HEIGHT: 9pt"><br>
    &nbsp;顯示效果預覽文字</FONT>
     

    結果:


     顯示效果預覽文字

     顯示效果預覽文字

     顯示效果預覽文字

     顯示效果預覽文字


     顯示效果預覽文字

     顯示效果預覽文字

     顯示效果預覽文字

     顯示效果預覽文字

    範例 4 (彩色字黑光...):

    HTML:

    請直接複製到你的MSN Spaces

    結果:

    複製起點→●



    M
    y love is as a fever, longing still
    F
    or that which longer nurseth the disease,
    Feeding on that which doth preserve the ill,
    ζ
    My thoughts and my discourse as madmen's are,
    At random from the truth vainly express'd;
    For I have sworn thee fair and thought thee bright,
    Who art as black as hell, as dark as night.
     
     

    ●←複製終點

     

     

    E.投射陰影效果:

    HTML:

    <font style="FILTER: Shadow(color=發光顏色,direction=135); HEIGHT: Apt;font-size:Bpt" face="字型" color=#FFFFFF>好像立體文字喔</font>

    ■參數

    A≧B+(Maybe 5↑)
    HEIGHT         -->列高
    font-size       --->文字大小
    color             -->發光顏色
    direction        -->方向(45角度單位)(0、45、90、135、180、225、270、315)
     

    範例(發光顏色):

    HTML:

    <font style="FILTER: Shadow(color=#4A7AC9,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#FF0000,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#FF0080,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#FF8000,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#008080,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#0000FF,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#8000FF,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#000000,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <br>
    <font style="FILTER: Shadow(color=#ddbbbb,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#ddd4bb,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#bbddbb,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#bbdddd,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#c3bbdd,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#ddbbcc,direction=135); HEIGHT: 19pt;font-size:12pt" face="Verdana" color=#FFFFFF>好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>

     

    結果:

    好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana  
    好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana   好像立體文字喔 Verdana  

    範例(方向):

    HTML:

    <font style="FILTER: Shadow(color=#4A7AC9,direction=315); HEIGHT: 22pt;font-size:12pt" face="Verdana" color=#FFFFFF>&nbsp;好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#4A7AC9,direction=0); HEIGHT: 22pt;font-size:12pt" face="Verdana" color=#FFFFFF>&nbsp;好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#4A7AC9,direction=45); HEIGHT: 22pt;font-size:12pt" face="Verdana" color=#FFFFFF>&nbsp;好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <br>
    <font style="FILTER: Shadow(color=#4A7AC9,direction=270); HEIGHT: 22pt;font-size:12pt" face="Verdana" color=#FFFFFF>&nbsp;好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="HEIGHT: 22pt;font-size:12pt" face="Verdana" color=#FFFFFF>&nbsp;好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#4A7AC9,direction=90); HEIGHT: 22pt;font-size:12pt" face="Verdana" color=#FFFFFF>&nbsp;好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <br>
    <font style="FILTER: Shadow(color=#4A7AC9,direction=225); HEIGHT: 22pt;font-size:12pt" face="Verdana" color=#FFFFFF>&nbsp;好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#4A7AC9,direction=180); HEIGHT: 22pt;font-size:12pt" face="Verdana" color=#FFFFFF>&nbsp;好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
    <font style="FILTER: Shadow(color=#4A7AC9,direction=135); HEIGHT: 22pt;font-size:12pt" face="Verdana" color=#FFFFFF>&nbsp;好像立體文字喔&nbsp;Verdana&nbsp;&nbsp; </font>
     

    結果:

     好像立體文字喔 Verdana    好像立體文字喔 Verdana    好像立體文字喔 Verdana  
     好像立體文字喔 Verdana    好像立體文字喔 Verdana    好像立體文字喔 Verdana  
     好像立體文字喔 Verdana    好像立體文字喔 Verdana    好像立體文字喔 Verdana  


     

    範例:

    HTML:

    <div style="FILTER: Shadow(color=#333333,direction=135); width:779px;height:353px;font-size:14pt;line-height:15pt;font-family:Verdana" align=center>
    內容省略</div>

    結果:

    複製起點→●



    My love is as a fever, longing still
    For that which longer nurseth the disease,
    Feeding on that which doth preserve the ill,
    ζ
    My thoughts and my discourse as madmen's are,
    At random from the truth vainly express'd;
    For I have sworn thee fair and thought thee bright,
    Who art as black as hell, as dark as night.


    ●←複製終點

    F.附陰影效果:

    HTML:

    <font style="FILTER:Dropshadow(color=#發光顏色,offX=◆,offY=◆); height=1px">內容擺這</font>

    <div style="filter:Dropshadow(color=#發光顏色,offX=◆,offY=◆);width:框框寬;height:框框高">內容擺這</div>

    ■參數

    color             -->發光顏色
    offX              -->水平位移(可正負)
    offY              -->垂直位移(可正負)
     

    範例(陰影):

    HTML:
    <font style="FILTER:Dropshadow(color=#cccccc,offX=3,offY=3); height=1px">像不像陰影文字</font>
    結果:

    像不像陰影文字

     

    範例(雕刻):

    HTML:
    <div style=" background-color:#CCCCCC;width:151px;height:19px">
    <font style="FILTER:Dropshadow(color=#FFFFFF,offX=1,offY=1); height=15pt;" color="#000000">有人說像雕刻文字</font>
    </div>
    結果:

    有人說像雕刻文字

    範例:

    HTML:

    <div style="FILTER:Dropshadow(color=#cccccc,offX=3,offY=3); width:779px;height:353px;font-size:14pt;line-height:15pt;font-family:Verdana" align=center>
    內容省略</div>

    結果:

    複製起點→●



    My love is as a fever, longing still
    For that which longer nurseth the disease,
    Feeding on that which doth preserve the ill,
    ζ
    My thoughts and my discourse as madmen's are,
    At random from the truth vainly express'd;
    For I have sworn thee fair and thought thee bright,
    Who art as black as hell, as dark as night.

    ●←複製終點

    G.模糊效果:

    HTML:

    <font style="filter:Blur(■);height:1px">內容擺這</font>

    <div style="filter:Blur(■);width:本文寬;height:本文高" align=center>內容擺這</div>

    ■參數

    direction        -->方向(45角度單位)(0、45、90、135、180、225、270、315)
     

    範例:

    HTML:

    <div style="filter:Blur(direction=135); ;width:779px;height:353px;font-size:14pt;line-height:15pt;font-family:Verdana" align=center>
    內容省略</div>

    結果:

    複製起點→●



    My love is as a fever, longing still
    For that which longer nurseth the disease,
    Feeding on that which doth preserve the ill,
    ζ
    My thoughts and my discourse as madmen's are,
    At random from the truth vainly express'd;
    For I have sworn thee fair and thought thee bright,
    Who art as black as hell, as dark as night.

    ●←複製終點

    H.波形效果:(ps.好複雜的參數設定@@")

    HTML:

    <div style="filter:Wave(■);width:本文寬;height:本文高" align=center>內容擺這</div>

    ■參數

    freq              -->頻率(0+)
    strength        -->振幅強度(0+)
    lightstrength  -->波峰強度(0~100)愈高越黑
    phase           -->起始相位(0~100)
     

    範例:

    HTML:

    <div style="FILTER: Wave(freq=17,strength=3,lightstrength=1,phase=0);;width:779px;height:353px;font-size:14pt;line-height:15pt;font-family:Verdana" align=center>內容省略</div>

    結果:

    複製起點→●



    My love is as a fever, longing still
    For that which longer nurseth the disease,
    Feeding on that which doth preserve the ill,
    ζ
    My thoughts and my discourse as madmen's are,
    At random from the truth vainly express'd;
    For I have sworn thee fair and thought thee bright,
    Who art as black as hell, as dark as night.

    ●←複製終點

    Step by step:

     

    1. 請從

      複製起點→●

      用滑鼠拉到

      ●←複製終點

      Ctrl+C(複製)

      再貼到你的網誌即可。

    2. 沒有複製標誌的,請直接複製效果,如果複製失敗,請上下加大複製內容(即把不必要的先複製),重新操作。

       
    3. 謝謝你的觀賞.

       
    4. 多多練習....相信你也能做到唷...

    Comments

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.

    To add a comment, sign in with your Windows Live ID (if you use Hotmail, Messenger, or Xbox LIVE, you have a Windows Live ID). Sign in


    Don't have a Windows Live ID? Sign up

    Trackbacks

    The trackback URL for this entry is:
    http://lavielee.spaces.live.com/blog/cns!B6BC2C95FD28881C!116.trak
    Weblogs that reference this entry
    • None