CSS text-shadow 替 H1 標題加陰影

常看到有些網站的文章標題有陰影效果,就像本篇的標題其實也帶有一點點陰影的效果,這是怎麼做到的呢?首先需要搞懂兩個東西,第一個東西就是網站標題 <H1> 標籤,第二個就是 CSS3 text-shadow 文字陰影,將這兩個語法結合在一起,就可以做出文章標題的陰影效果,這樣的效果好處在於可以讓標題更加有立體感也更加清晰,可以與網頁內文做一個簡單的區分。

HTML H1 標題與內文
<h1>這裡是範例標題</h1>
這裡是文章內容 .....................
網頁中最重要的標題通常會用 <h1> 標籤來標示,請參閱:HTML H1 H2 H3 H4 H5 H6 標題

CSS3 text-shadow 語法
<style type="text/css">
<!--
h1 {
 text-shadow:3px 3px 3px #cccccc;
}
-->
</style>
這是一個標準的 CSS 語法區塊,由『<style type="text/css">』開始至『</style>』結束,我們在裡面使用了 h1 這樣的宣告來設定 H1 標題的陰影效果,text-shadow 即為文字陰影效果的屬性,詳細用法請參閱:CSS3 text-shadow 文字陰影效果

將以上兩個部分整合在一個網頁中
<style type="text/css">
<!--
.h1 {
 text-shadow:3px 3px 3px #cccccc;
}
-->
</style>
<h1>這裡是範例標題</h1>
這裡是文章內容 .....................
呈現效果
這裡是範例標題

這裡是文章內容 .....................
是不是很清楚的將文章標題與文章內容區分開來了呢?這樣的技巧在許多網站上都看得到,不過編輯在這裡建議,雖然 text-shadow 可以將 H1 標題明顯標示出立體感,但使用過量會造成暈染效果,反而會讓標題模糊掉,設計上需多注意呈現效果。

相關主題延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 2012~2016 Englsih version聯絡我們
PHP Smarty MySQL JQuery Apache W3C