對這文章發表回應
發表限制: 非會員 可以發表
發表者： 冷日 發表時間： 2008/3/10 14:33:27
使用佈景主題樣式表(CSS)，除了制訂大型的版面風格以外，
在內容寫作時，也有很好的應用。
使用一點小小的技巧，
就也可以讓自己的文章變的更出色，也會更顯目。
下面提出一個蠻常用的效果：文字底線，
基本上很多版面設計師都不愛用文字底線(underline)，
一般考慮到的原因，
大約是中文字的下方加上底線後，實在不好看。
於是就想到可以用 CSS 來自定不同的文字底線風格，
讓需要強調的文字更為顯目，同時也更具有個人特色：
範例一：
在文字下方標記毛筆印記，像是『古人』看書時加上的批註…
“這時候就可以使用樣式表創造的小特色”
CSS 寫法：
此範例使用了這樣的背景圖來製造效果：
範例二：
用手繪的方法畫線，產生個性化的顯目提示
“這時候就可以使用樣式表創造的小特色，產生出一種手繪的感覺”
CSS 寫法：
此範例使用了這樣的背景圖來製造效果：
當然隨著美術人員或作者們的巧思，
運用同樣的技法與概念，
相信可以創造出更多的更靈活的效果。
來源出處 : http://rss.nicetypo.com/nt/nicetypo.nsf/contentBypermaLink/77A99A1BD13A62D748256E69001D7B99
在內容寫作時，也有很好的應用。
使用一點小小的技巧，
就也可以讓自己的文章變的更出色，也會更顯目。
下面提出一個蠻常用的效果：文字底線，
基本上很多版面設計師都不愛用文字底線(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