因著關注好友詢問標題字體如何製作發光，今天就來跟大家分享一下如何製作標題HOVER變化，以及好用的網站來直覺式的調整CSS樣式吧，終於不用再手動測試調到懷疑人生啦！
因為痞客邦追蹤的好友詢問標題的HOVER，目前使用的是發光的滑鼠移入顯示，其實CSS有非常多相關的特效變化，都是我們真正要用到的時候再上網查詢就可以了，是在上CSS線上課的時候老師說到的，畢竟我們記得住的有限啊！
今天跟大家分享如何修改標題，文末跟大家分享幾個好用的CSS網站大家可以自己玩玩看各種特效喔！喜歡可以直接套用在自己的BLOG上面，撿現成的喔~
首先找到title，設定相關float、欄位寬、字型大小等設定，痞客邦語法應該有原先的樣式設定直接修改即可。
width設定太短的樣式結果
語法
.title {
float: 設定left;
width: 設定文字顯示的寬度px;
font-size: 設定文字大小px;
}
至於title a 跟title兩者哪邊可以放什麼，目前還沒有太清楚知道，不過我們可以根據原先的語法進行修改。
white-space: nowrap; 是不換行，如果想要文章標題太長換行，應可以將這行刪除。
text-overflow: ellipsis;為標題字數過多時自動顯示...的樣式，可以不變更。
語法
.title a {
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
display:設定 block;
font-weight:自行設定字體粗細(變化前);
color:自行設定字體顏色(變化前);
}
大家都知道hover是變化後的語法，網友詢問到如何製作發光字體，可以參考下面這兩個網站進行直覺式的調整，非常方便喔！感覺CSS網站美觀就是進階的AI或PS的設定，網頁真做起來頭很痛，但又很有趣！
標題字體發光效果
語法
.title a:hover{
color:自行設定文字顏色(變化後);
目前設定的發光數值為
text-shadow: rgb(163, 241, 255) 0px 0px 10px;
}
小結
其實標題滑鼠移入變化沒有什麼特別的，前一篇有滑鼠移入變化的文章，不過還是跟大家分享上面兩個網站，就算未來該網站掛掉了，其實類似的網站一定還會層出不窮，大家可以多上網找資源，可以改出自己最理想的部落格版型喔！
相關文章推薦
留言列表
ACG大全 (3)