茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事，不可能遺忘，只是想不起來而已！
 恭喜您是本站第 1729936 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_00014.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [佈景主題|CSS] 設計個性化的文字底線

討論區主頁 - 主題一覽 > 網頁設計 > [佈景主題|CSS] 設計個性化的文字底線
平面展開 | 最新的先
前一個主題 | 下一個主題 |
發表者 討論內容
冷日
(冷日)		 發表時間：2008/3/10 14:33
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15773
[佈景主題|CSS] 設計個性化的文字底線
使用佈景主題樣式表(CSS)，除了制訂大型的版面風格以外，
在內容寫作時，也有很好的應用。
使用一點小小的技巧，
就也可以讓自己的文章變的更出色，也會更顯目。

下面提出一個蠻常用的效果：文字底線，
基本上很多版面設計師都不愛用文字底線(underline)，
一般考慮到的原因，
大約是中文字的下方加上底線後，實在不好看。
於是就想到可以用 CSS 來自定不同的文字底線風格，
讓需要強調的文字更為顯目，同時也更具有個人特色：
範例一：
在文字下方標記毛筆印記，像是『古人』看書時加上的批註…
“這時候就可以使用樣式表創造的小特色”
CSS 寫法：
<span style="line-height:22px; padding:4px 2px 2px 0;
letter-spacing:6px; background:white url(你的圖片路徑) 
repeat-x bottom">
這時候就可以使用樣式表創造的小特色</span>


此範例使用了這樣的背景圖來製造效果：

範例二：
用手繪的方法畫線，產生個性化的顯目提示
“這時候就可以使用樣式表創造的小特色，產生出一種手繪的感覺”
CSS 寫法：
<span style="line-height:22px; padding:4px 2px 2px 0;
letter-spacing:2px; background:url(你的圖片路徑) 
repeat-x bottom">
這時候就可以使用樣式表創造的小特色</span>


此範例使用了這樣的背景圖來製造效果：

當然隨著美術人員或作者們的巧思，
運用同樣的技法與概念，
相信可以創造出更多的更靈活的效果。

來源出處 : http://rss.nicetypo.com/nt/nicetypo.nsf/contentBypermaLink/77A99A1BD13A62D748256E69001D7B99
回覆
平面展開
前一個主題 | 下一個主題 | | | |

討論串

  •  » [佈景主題|CSS] 設計個性化的文字底線 (冷日
    (冷日), 2008/3/10 14:33)

| Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|