［CSS］純文字 LOGO

2005-09-28 361 words One minute

發覺純用文字也蠻有趣的，研究了一下，用 CSS 作出幾個感覺還不錯的 logo。用文字 logo 的話，體積也會比使用小貼紙圖片要來得省上許多吧。

flickr

<span style="color: blue;">flick</span><span style="color: red;">r</span>

※第一課：只是更改顏色，不難。沒有特地使用 flickr 自己的標準色與字體。

43 Things

<span style="color: #C89C19;">43</span> <span style="color: black;">Things</span>

※第二課：上一課的複習，重點仍是顏色。

Bloglines

<span style="color: #1393C0">Blog</span><span style="color: #1393C0; border-bottom-style: dotted; border-width: 1px">lines</span>

※第三課：替後半段文字加下邊框，可以試著改變 border-width 看看不同的感覺。

<span style="color: black; border-color: #C00; border-style: solid; border-width: 2px; font-family: Arial; font-weight: bold; padding: 4px 2px 0px 2px;">23</span>

※第四課：將數字加框。不能作出圓角框是遺憾之處。

LiVEJOURNAL

<span style="background-color: #6699CC; color: white; font-family: Arial; font-weight: bold; padding: 4px 4px 0px 4px;">L<span style="color:#123466">i</span>VEJOURNAL</span>

※第五課：上底色，以及巢狀樣式定義。

Gmail

<span style="font-weight: bold"><span style="color:#0075BE; font-family:Palatino Linotype">G</span><span style="font-family: Verdana"><span style="color: #DA3838; font-variant: small-caps">m</span><span style="color: #FFC514">a</span><span style="color: #0075BE">i</span><span style="color: #2EB457">l</span></span></span>

※第六課：為了更接近原 Logo，故有指定字型（均為 WinXP 內建）。關鍵之處在於 “Gmail” 的 “m” 為小寫，但加入了 font-variant: small-caps;。此一樣式可將小寫字母轉為大寫，但大小略有差異；若是使用 text-transform: uppercase; 則是會將小寫字母以大寫表示。