Home > Developer > JavaScript
I accidentally think of the art words I made when I was a child, that is, adding lines to the right of a wide stroke to create a three-dimensional effect. I think this idea can also be achieved using CSS, you can use a little bit of CSS to create a shadow effect, such as adding a border and using relative positioning to achieve some floating effect, or protruding a button or concave it. Either font overlays the font to achieve the shadow effect. The following describes a method to implement the shadow effect.
The shadow effect is generally used to provide effect feedback when you click or hover the mouse. Here, I used ul to build the framework. The previous log also introduced how to use ul to create the list menu that I want. Some people reported that CSS occupies a large height, so this time the height was compressed. I have tried my best to see the attributes of CSS, so that every attribute has its own meaning that it cannot be replaced. If you do not understand anything, you can M me.
Design Philosophy:
Two identical texts are misaligned and superimposed to produce shadow effects. A professional saying is sliding door technology...
Note:
1. Set the overall bgcolor in ul.
2. Control the specific character arrangement in li. Here I have not set the width, so it is automatically expanded according to the content. In the future, we can use the width here, because two layers of span are used to implement the shadow, especially the offset is added to the Shadow span. Therefore, if you control the font position in the span, a cup is needed.
3. the offset of the Shadow span can be customized. If the font is bigger, it can be offset more. In addition, after the shadow span position is set to absolute, the layer automatically moves forward (highlighted on the front end ).
01 <! DOCTYPE html>
02 03 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 <! -- Bgcolor 1165a1 border 1px solid #0D5995 -->
12 <! -- <Link rel = "stylesheet" type = "text/css" href = "./styles.css"> -->
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 // unlike the past, if elements are superimposed by multiple levels, you cannot use regular css to change the style.
24 $ (document). ready (function (){
25
26/* hover event binding */
27 $ ("ul"). delegate (". over", "mouseover", function (){
28 $ (this). parent (). find (". shadow"). toggleClass ("hide ");
29 });
30
31/* hover event binding */
32 $ ("ul"). delegate (". over", "mouseout", function (){
33 $ (this). parent (). find (". shadow"). toggleClass ("hide ");
34 });
35
36/* bind the mouse click event */
37 $ ("ul"). delegate (". click", "click", function (){
38 $ (this). parent (). find (". shadow"). toggleClass ("hide ");
39 });
40
41 });
42
43 </script>
44 45
46 <body>
47 <ul>
48 <li>
49 <span title = "no shadow effect"> noEffect </span>
50 </li>
51 <li>
52 <span class = "shadow"> withShadow </span>
53 <span title = "shadow effect"> withShadow </span>
54 </li>
55 <li>
56 <span class = "shadow hide"> mouseOverChange </span>
57 <span title = "hover the mouse over the Shadow" class = "over"> mouseOverChange </span>
58 </li>
59 <li>
60 <span class = "shadow hide"> mouseClickChange </span>
61 <span title = "mouse click shadow effect" class = "click"> mouseClickChange </span>
62 </li>
63
64 <div class = "clear"> </div>
65 </ul>
66 </body>
67
68
Author: xiangjishi
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
