為主題添加文字陰影

知更鳥
知更鳥
知更鳥
1528
文章
6915
評論
2011年2月20日01:31:16 33 10.3K

這個文字陰影效果,是從CSS2.0中延續過來,當初只有Safari支持這一屬性,隨著其它瀏覽器的支持,這個漂亮的效果,才真正應用到網頁設置中,是除了CSS3圓角屬性之外,效果最棒的,可增強文字的清晰度。熱點新聞主題之前部分位置已采用,如導航菜單上的文字,為了模仿Apple網站導航上用圖片作的文字浮雕效果,就添加了這個屬性,可惜IE不支持,包括剛發布的IE9 RC,悲哀.....為了在不同核心瀏覽器下外觀保持一致,采用蹩腳的IE專用屬性勉強弄了個支持IE的文字浮雕效果,不是很理想,特別是對英文,看上去很別扭,IE8、IE9需切換到兼容模式,才能勉強接受。

下面就將這個效果加到所有文字上,很簡單。

打開style.css找到:

  1. body {
  2. background: #f2f2f2;
  3. font: 12px 微軟雅黑, Verdana, Tahoma, Lucida Grande, Arial, sans-serif;
  4. color: #000;
  5. }

添加一句:

  1. text-shadow: 0px 1px 0px #d1d1d1;

其中,#d1d1d1為陰影顏色,可根據喜好自行更改。最終代碼:

  1. body {
  2. background: #f2f2f2;
  3. font: 12px 微軟雅黑, Verdana, Tahoma, Lucida Grande, Arial, sans-serif;
  4. color: #000;
  5. text-shadow: 0px 1px 0px #d1d1d1;
  6. }

另外在:

  1. .comment-reply-link {
  2. font-size:12px;
  3. color: #fff;
  4. text-align:center;
  5. padding: 2px 15px 2px 15px;
  6. }

  1. #featured?.item?.boxCaption?{
  2. width:211px;
  3. padding:10px;
  4. margin:?115px 0 0 3px;
  5. position:absolute;
  6. top:160px;
  7. z-index:4;
  8. background:url(images/bg-box.png)?repeat?top?left;
  9. color:#fff;
  10. }

及css.css樣式文件中:

  1. #gg?a{
  2. color:?#fff;
  3. font-size:?13px;
  4. letter-spacing:2px;
  5. }

加入:

  1. text-shadow: 0px 1px 0px #000;

其它主題也大同小異,在樣式文件中找到全局屬性body {}加入上面那句陰影效果代碼就可以了。

weinxin
關于本站
分享交流WordPress經驗與技巧,關注前端設計與網站制作。僅用于功能演示。
重定向wp-login.php登錄到指定頁面 WordPress

重定向wp-login.php登錄到指定頁面

如果你的WordPress網站已有前端登錄注冊功能,不想讓其他人訪問wp-login.php登錄頁面,并且當訪問WordPress默認登錄頁面時重定向到指定的頁面,比如前端登錄注冊頁面等,可以通過下面...
WordPress 5.4.1安全更新、中文版下載 WordPress

WordPress 5.4.1安全更新、中文版下載

WordPress 5.4.修補了7個安全漏洞,并修正了17個問題。這些漏洞存在于 WordPress 版本 5.4 和更早版本,WordPress 3.7 以后的所有版本都已修補安全漏洞,建議立即更...
B站BV號鏈接轉av號 WordPress

B站BV號鏈接轉av號

之前用Smartideo插件轉載B站視頻,只需要復制粘貼視頻地址到文章中就可以了,B站是目前唯數不多沒廣告的視頻站點了,不過最近B站視頻鏈接后綴ID號從av變成BV開頭,插件的功能失效。 已有用戶向插...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論:33   其中:訪客  25   博主  5   引用   3
    • 憨豆先生 憨豆先生 6

      我竟然沙發了…

      • 蘋果 蘋果 5

        現在apple主頁已經沒有這個浮雕效果了

        • 晨露博客 晨露博客 2

          呵呵,學習了。。

          • 探索者 探索者 1

            怎樣修改菜單欄文字顏色,想改為白色,就是不想要想鼠標效果,全改白色。

            • 晨光博客 晨光博客 5

              不錯,這樣方便多了!

              • dikgo dikgo 2

                為什么我的背景圖片在360瀏覽器顯示不了,但是在谷歌瀏覽器又可以,有什么辦法設置下嗎

                • 啟程 啟程 1

                  試一試

                  • cgrabbit cgrabbit 4

                    鳥哥,雖然環主題了。可是還是經常回來看看的。支持鳥哥!

                    • 藍殤 藍殤 0

                      恩,這個不錯,呵呵,支持下!

                      • 看得見風的人 看得見風的人 6

                        鳥哥有個問題,按照你的修改之后,頁面最下方的公告也變成有陰影的了,視覺上有點看不太清楚,你的公告怎么還是以前的樣子呢?~

                        • 看得見風的人 看得見風的人 6

                          還有你目前的“留言無頭像”提示怎么一閃一閃的了~~

                          • 一灰 一灰 0

                            好像有點暈~

                            • 韓國 韓國 5

                              想問一下鳥哥,怎么能同時用WP系統的兩個主題(博客+企業)。

                                • 知更鳥 知更鳥

                                  @ 韓國 沒太明白

                                  那就分別安裝兩個WP
                                  或者使用具有不同布局的主題模板,
                                  比如:我這個主題就同時有CMS布局及博客兩個模板,可以同時使用

                                • 碎語人生 碎語人生 5

                                  我用的是IE沒看出來效果暫時不更改了。

                                  • imagic imagic 3

                                    這個代碼是css2.0的~~

                                      • 知更鳥 知更鳥

                                        @ imagic 確實CSS2中就有,不過是在CSS3出來后才開始真正應用,大概是因為當初都不支持這個屬性吧

                                      • 碎語人生 碎語人生 5

                                        我也得安裝個其他瀏覽器試一試

                                        • xqiushi xqiushi 5

                                          再學習一個

                                          • leejoa leejoa 3

                                            鳥哥的東西精華呀,又學習了。正在PJ到WP中。。。

                                            • xuan律 xuan律 5

                                              好久沒來了,繼續學習圍觀。

                                              • 有魚 有魚 4

                                                我添加了,好像沒什么效果,可能是瀏覽器的問題吧http://www.mvxiazai.tk/

                                                • 隨風而去 隨風而去 1

                                                  的確不錯

                                                  • 小驥伏櫪 小驥伏櫪 0

                                                    http://www.bwmn-zju.net 今天使用了您的主題,問題是IE9下上方導航效果特別差,請問這個怎么改呢?我CSS不太懂

                                                    • SUPER雨 SUPER雨 3

                                                      謝謝分享! 學習一下!