基於CSS3的博客園原創主題

一直想把博客園的主題好好改改，也不枉本身想當前端工程師的心。終於花了兩天時間好好收拾了一下博客園的樣子，當！當！當！終於出爐了，得好好寫一遍博客記錄一下。

• 向大牛致敬

初心是看到一個很是酷的博客Qing Wang ,很是喜歡這種簡單的風格，也想把博客園的風格打形成這個樣子。研究了各類配色和背景圖片，仍是以爲原來做者搭配的最舒服，只能先沒創意的模仿了，若有版權問題，立刻修改。仍是得抽空拍幾張姿態高的照片才成。

• 佈局設計

總體是左右佈局。左邊一個fixed的導航欄；右邊是能夠向下滑動的主頁容器，用於文章列表的展現、具體文章的展現。

• 左邊固定導航欄

左側導航欄固定，即便右邊內容超出頁面大小須要向下滾動時，導航欄也不會隨着滾動。實現方法是設置positon爲fixed，生成絕對定位的元素，相對於瀏覽器窗口進行定位。
元素的位置經過 "left", "top", "right" 以及 "bottom"屬性進行規定，默認初始定位是top=0，left=0。寬度爲30%，也就是佔頁面的的30%。

font-family: "verdana","Arial","微軟雅黑", "Helvetica", "sans-serif";
    position: fixed;
    height: 100%;
    width: 30%;    
    background: url(images/1.jpg) no-repeat;
    box-shadow: 2px 2px 1px #888888;

• 右邊主頁容器

因爲是左右佈局，很容易想到用float屬性完成。可是導航欄已經設置position:fixed，右邊的主頁容器即便設置float:left，也會"無視"左邊的導航欄，覆蓋掉它。解決辦法是給右邊的主頁容器設置一個左邊的margin，大小也爲30%，爲左邊的導航欄留出位置。

float:left;
    margin-left: 30%;
    width: 60%;
    height: 100%；
    min-width: 950px;
    text-align: left;
    padding: 5% 5.7% 7% 4%;

• 「閹割」側邊欄

如上圖所示，官方的博客園模板都有側邊欄這個div，在主頁容器內部。可是考慮到若是加入側邊欄會使整個佈局很擠，索性所有去掉，追求極簡的風格，辦法很簡單，設置display:none便可。

• 導航細節 - css3動畫

佈局設置好了之後，給bloglogo和導航欄添加一點小動畫。

鼠標懸停在「smoothLily」上會有一個放大，變亮的效果。採用css3的transform和transition實現。

transform屬性的瀏覽器支持狀況

Internet Explorer 十、Firefox、Opera 支持 transform 屬性。
Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用於 2D 轉換）。
Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。
Opera 只支持 2D 轉換。

在本例中，設置tranfrom:scale(1.02)，便可實現放大效果。可是若是隻有放大效果，當鼠標懸停上去時，logo直接放大，沒有放大的過程，效果很差。用transition屬性添加「補間動畫」。將初始顏色透明度設置爲0.85，懸停動做後的透明度爲1，實現變亮的效果。

transition屬性的瀏覽器支持狀況

Internet Explorer 十、Firefox、Opera 和 Chrome 支持 transition 屬性。
Safari 支持替代的 -webkit-transition 屬性。
註釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 transition 屬性。

代碼以下

h1 {
    font-size: 320%;
    font-weight: bolder;
    line-height: 2em;   
    padding-top: 50%;
    width: 100%;
    text-align: center;
    transition:0.3s ease-out;
    -webkit-transition:0.3s ease-out;
    -o-transition:0.3s ease-out;
    -moz-transition:0.3s ease-out;
}

h1:hover{
    transform: scale(1.02);
    -ms-transform: scale(1.02);
    -webkit-transform:scale(1.02);
    -moz-transform:scale(1.02);
    -o-transform:scale(1.02);
}

變亮效果

h1 a.headermaintitle{
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

 h1 a.headermaintitle:hover{
    color: rgba(255,255,255,1);
    text-decoration: none;

}

注意transition屬性加在標籤的初始狀態上。

• 導航細節 - 陰影

經過設置text-shadow和box-shadow屬性給blogLogo和整個側邊導航欄加陰影。

text-shadow

全部主流瀏覽器都支持 text-shadow 屬性。
註釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。

color: rgba(255,255,255,0.85);
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);

box-shadow

IE9+、Firefox 四、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。

header {
    font-family: "verdana","Arial","微軟雅黑", "Helvetica", "sans-serif";
    position: fixed;
    height: 100%;
    width: 30%;    
    background: url(images/1.jpg) no-repeat;
    box-shadow: 2px 2px 1px #888888;
}

• 導航背景 - 圖片遮罩

原始導航欄的圖片爲：

如今效果：

處理辦法是在導航欄背景上加一個div，大小和導航欄同樣，而且包含導航欄的內容。給這個div設置漸變的半透明背景，既能夠給原來的圖片背景加一個遮罩。

.header-cover{
    height: 100%;
background-color: rgba(61,66,96,0.6);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(20%,rgba(61,66,96,0.6)),color-stop(100%,rgba(21,23,34,0.8)));
background-image: -webkit-linear-gradient(-410deg,rgba(61,66,96,0.6) 20%,rgba(21,23,34,0.8));
background-image: linear-gradient(140deg,rgba(61,66,96,0.6) 20%,rgba(21,23,34,0.8));
}

• 導航背景 - jQuery修改html結構

正是由於須要在導航div以內添加一個包裹導航內全部標籤的div，用來設置圖片漸變，須要修改html結構。可是博客園的html模板是不變的，所以只能經過jQuery實現div的添加。

注意：須要向博客園管理員申請JS
權限。

<scriptsrc="prettify.js"type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#blogTitle").next().andSelf().wrapAll('<div class="header-cover"></div>');
$("h3").css("margin-top","10px");
});
</script>

• 導航按鈕 - 幽靈按鈕

幽靈按鈕是最近很流行的一類按鈕，好多高大上的網站都用這類按鈕。按鈕無背景，簡單線框示意按鈕的大小，或者乾脆沒有邊框。以按鈕上的文字代表按鈕做用，沒有複雜的陰影、字體效果。

• 後續

  博客的雛形已經造成，可是還有一些不滿意的地方，留待之後優化。
• 如何把側邊欄添加進來，作到知足功能，佈局舒服。
• 代碼部分的css效果不太理想，想最後作成sublime text那種代碼高亮效果。
• 文章正文添加關鍵字高亮效果。
• 在博客園市場發佈模板。

最後，祝你們2014.12.25聖誕快樂…^^