Kaie"s Blog 2.0 beta!
Back to "Top"

My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr
Back to "Top"
My Secret Notebook
 Show "Table of Contents"
Contact Me
Subscribe to my Posts feed
Subscribe to my Comments feed
My Flickr

Monday, May 07, 2007

[CSS] Magazine Style Drop Cap

  來分享一下,我們時常在雜誌常見的一個首字放大(drop cap, dropped capital letter),是很受歡迎的設計元件,用來做為商業通訊、雜誌文章、書籍章節或其它公開文件的開頭…之前看到某個教學,於是也跟著玩了起來囉...底下來看幾個範例吧!參考資料來源:
Mandarin Design -> Magazine Style CSS Drop Caps


.Example1:
<span style="margin:5px 7px 0 0; float:left; background: #fff; border:2px dashed #aaa; line-height:55px; font-family:華康POP2體W9,華康POP1體W9,標楷體,times;font-size:50px;color:white;">旅</span>
美投手王建民6日對西雅圖水手隊差一點完全比賽,投了7.1局無安打、無人上壘的比賽,鈴木一朗形容王建民「有著冷靜的外表,但內心卻是火熱的。」他說:「我喜歡他。」原本鈴木一朗想在七局上成為打出第1支安打的打者,不過左外野深遠飛球遭到松井秀喜美技接殺。

.Example2:
<span style="border: 1px solid darkkhaki; padding: 3px; background: khaki; margin-right: 6px; margin-top: 5px; float: left; line-height: 55px; font-family:華康POP2體W9,華康POP1體W9,標楷體,times;font-size:50px;color:white;" >鈴</span>
木一朗在6日的比賽中,直到七局上才意識到王建民有可能會締造完全比賽,在該局第一位上場打擊之前,他詢問隊友城島健司:「現在是完全比賽嗎?」城島回答說:「是的。」鈴木一朗便告訴城島,他要擔任打破完全比賽打出第1支安打的打者。

.Example3:
<span style="float: left; line-height: 70px; padding-top: 2px;">S</span>
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap. It looks best when followed by way too much text. We used a font size of 56px for the first letter. If there is enough text an even bigger first-letter size looks good. The code can be adjusted for a slight overlap by adjusting the letter spacing. The color name chocolate tastes good today. There are more edible color names here.

.Example4:
<span style="border: 1px solid black; background: firebrick; margin-right: 6px; margin-top: 5px; float: left; line-height: 60px; padding-top: 2px; padding-right: 5px;">M</span>
Mike Golby might like the background color firebrick better than gold. Golby changes text colors for emphasis but if we don't specify the color for the text it will default to normal text color for that page. By the way, thanks for the Strunk and White Plumerias Mike. I noticed them when visiting your place to find an example of a color to use.

.Example5:
...
...
要如何有型,由你決定...

以上Code中的CSS參數請自行客制化吧 >_^

7 Comments:

Who: Anonymous Class:
When: May 07, 2007 11:50 PM  

若要大範圍使用這種效果
可以用first-letter

http://www.w3schools.com/css/pr_pseudo_first-letter.asp

Who: Unknown Class:
When: May 07, 2007 11:59 PM  

To Anonymous:
感謝默默付出的無名氏,提供的寶貴資料!! 對於不想每次自行加span tag的人,可以使用這個方式...一勞永逸

Who: Anonymous Class:
When: February 11, 2008 9:59 PM  

To tsung-kai:

請問放在(code)...(/code)的語言不執行??
需要另外加什麼嗎??

Who: Unknown Class:
When: February 12, 2008 3:06 AM  

To Anonymous:
咦,不執行...?! 不太懂耶...可以再說清楚些嗎..

Who: Anonymous Class:
When: February 13, 2008 12:19 AM  

To tsung-kai:

哈~不好意思!!
我的意思是指在example4下code欄位裡面的指令不執行,是需要再加什麼嗎?

謝謝~

Who: Unknown Class:
When: February 13, 2008 1:38 AM  

To Anonymous:
喔...我懂了,請參考一下這篇 http://0rz.tw/352gT 在這篇裡頭找個這些關鍵字「把在Blog貼"html code"的一些tips」開始的位置,就有了..

Who: Anonymous Class:
When: February 13, 2008 10:17 PM  

To tsung-kai:

哈~SORRY!!偷學又不認真,謝謝你了!!!~