Tzeng Yuxio

博觀而約取,厚積而薄發

[CSS]純文字 LOGO

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


flickr

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

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


43 Things

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

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


Bloglines

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

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


23

1
<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

1
<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

1
<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; 則是會將小寫字母以大寫表示。

Comments

Related Posts Plugin
    for WordPress, Blogger...