用CSS3做Logo

9月初，Blogger的新版後台正式上線。

不巧，我正在那個時候，進後台開模版編輯HTML，移掉了幾段語法。結果，順手存檔後，沿用多年的Classic模版就這樣被Blogger的新版後台給吃掉了。

剛開始有點錯愕，一方面是沒料到新版後台會這麼絕情，另一方面則意識到這根本不是一個合適改版的時間點。

本來想乾脆就套用Blogger的官方預設模版，不料看了幾天，還是忍不住動手開始改版。

雖說是改版，但以蓋房子裝潢來作譬喻，其實更像在拆房子，甚至是移除所有裝飾到幾近只剩骨架的地步。

因為完全沒有時間做圖，所以版面上後來陸續增加上去的視覺元素，如圓角、漸層、透明度……一律都以CSS包辦完成。

最後，乾脆連Logo都用CSS來做：

9

JT

CSS部份：

#jas9logo0923 {
background:#f50;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
color:#fff;
display:block;
font-family:georgia;
font-size:60px;
font-weight:bold;
height: 50px;
line-height:40px;
margin:25px auto;
text-align:center;
width: 50px
}

#jas9logo0923 #jas9dot0923{
background: #f50;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;height: 20px;
color:#FFF;
font-size:18px;
font-weight:normal;
text-align:center;
line-height:20px;
width: 20px
}

HTML部份：

<div id="jas9logo0923">9<div id="jas9dot0923">JT</div></div>

如果要做成大尺寸，也只要把參數倍增即可。

9

JT

省下開Illustrator跟Photoshop做圖的時間，同時，也完全沒有解析度的問題。