使用 javascript(jQuery) + css 實現字型陰影製作效果

最後更新：2013-12-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

偶然突發奇想想到了小時候做的藝術字，就是在筆畫比較寬的字右邊加上線條做成立體效果，我覺得這種想法也是可以使用 CSS 來實現的，通過一點點 CSS 就可以造成陰影製作效果，比如增加 border 並且配合使用相對定位來做一些浮動的效果，或者凸出來那樣或者凹進去的按鈕。要麼就是字型通過字型疊加也能夠實現陰影製作效果。下面就來介紹一種實現陰影製作效果的方法。
陰影製作效果一般就是用來配合在進行一些點擊或者滑鼠浮動的時候會出現效果反饋。這裡為了便於說明我使用了 ul來搭建架構,前面的日誌也介紹過如何使用 ul 來製作自己想要的列表菜單，這裡就不多說啦。有人反映 CSS 佔得高度過大，所以這次在高度上進行了壓縮。我已經盡量的所見 CSS 的各項屬性，爭取使每一個屬性都有自己無法被取代的意義。如果有不明白的地方可以M我。

設計思想：
         兩個相同的文字進行錯位疊加造成陰影製作效果，專業的說法是滑動門技術 …

注意事項:
         1總體 bgcolor 要在 ul 中進行設定托底
         2在 li 中控制字元具體的排列，這裡我沒有設定 width 所以是按照內容自動擴充的，以後以可以在這裡使用定寬，因為是使用了兩層 span 來實現陰影，特別還給陰影 span 加了位移，所以在 span 中控制字型的位置的話會杯具的。
         3陰影 span 的位移可以自訂。字型大點兒的話，可以位移多一些。另外陰影 span position 設定成 absolute 後，圖層會自動前移的(凸顯在前端)。

01 <!DOCTYPE html>
02 <html>
03   <head>
04     <title>CssFontShadow.html</title>
05
06     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
07     <meta http-equiv="description" content="this is my page">
08     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
09     <script src="http://code.jquery.com/jquery-latest.js"></script>
10
11     
12     
13         <style type="text/css">
14             body{margin: 0;padding: 0;}
15             ul{margin: 200px auto;padding: 0;background-color: #1165a1;width: 600px;}
16             ul li{list-style: none;margin: 0;position: relative;float: left;background-color: transparent;border-right: 1px solid #0D5995;padding: 10px;}
17             ul li span{margin: 0;font-size: 1em;color: white;background-color: transparent;position: relative;cursor: pointer;}
18             ul li span.shadow{color: #131C25;position: absolute;top: 11px;left: 11px;}
19             ul li span.hide{display: none;}
20             div.clear{clear: both;}
21         </style>
22         <script type="text/javascript">
23             // 跟以往不同，元素由多個層級進行疊加的話則不能使用常規的 css 來改變樣式了
24             $(document).ready(function(){
25
26                 /* 滑鼠移至上方事件綁定 */
27                 $("ul").delegate(".over","mouseover",function(){
28                     $(this).parent().find(".shadow").toggleClass("hide");
29                 });
30
31                 /* 滑鼠移至上方事件綁定 */
32                 $("ul").delegate(".over","mouseout",function(){
33                     $(this).parent().find(".shadow").toggleClass("hide");
34                 });
35
36                 /* 滑鼠點擊事件綁定 */
37                 $("ul").delegate(".click","click",function(){
38                     $(this).parent().find(".shadow").toggleClass("hide");
39                 });
40
41             });
42
43         </script>
44   </head>
45
46   <body>
47     <ul>
48         <li>
49             <span title="沒有陰影製作效果">noEffect</span>
50         </li>
51         <li>
52             <span class="shadow">withShadow</span>
53             <span title="有陰影製作效果">withShadow</span>
54         </li>
55         <li>
56             <span class="shadow hide">mouseOverChange</span>
57             <span title="滑鼠移至上方陰影製作效果" class="over">mouseOverChange</span>
58         </li>
59         <li>
60             <span class="shadow hide">mouseClickChange</span>
61             <span title="滑鼠點擊陰影製作效果" class="click">mouseClickChange</span>
62         </li>
63
64         <div class="clear"></div>
65     </ul>
66   </body>
67
68 </html>

作者：香吉士

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

使用 javascript(jQuery) + css 實現字型陰影製作效果

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support