用CSS3做Logo

作者: Jas / 發表於 2011-09-23

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做圖的時間,同時,也完全沒有解析度的問題。





回上方