前端之drop-shadow效果

今天从hackernews跳入COMMANDO来看它的『 flatten bootstrap』效果，却被网页简洁、漂亮的UI吸引住了。我对bootstrap已经比较了解，一眼就能看出来这个网站的主页是根据bootstrap主页经过简单修改得到的。一直下拉到网页底部，看到了这个效果：

这种有点立体感的小框，曾在不少网站见到过，一直很喜欢。这次决定认真研究一下效果是什么做出来的。

比较懒，先在V2EX提问，没有得到详细的回答。于是狠心用chrome工具『审查元素』来分析。找到相应模块的标签，找到css文件并根据标签进行查找。将有关的css定义提取出来，做了一个简单的例子进行尝试。终于弄明白这个效果是怎么产生的。

这里先展示一下成品：

首先新建一个style.css文件，用文本编辑器打开，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*下面的css定义已经是最精简形式，每一项的更改或删除都会影响最终效果。作为学习，不妨尝试修改小项查看效果，以增加了解。*/
.box {
    background:#fff;
    box-shadow:none;
    border:1px solid #ddd;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:60px 0;
    margin-top:15px;
    margin-bottom:60px;
}
.drop-shadow {
   position:relative;
}
.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
    bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
   box-shadow:0 15px 15px rgba(0, 0, 0, 0.7);
   -webkit-transform:rotate(-2deg);
   -moz-transform:rotate(-2deg);
   -o-transform:rotate(-2deg);
   transform:rotate(-2deg);
}
.drop-shadow:after{
   right:10px;
   left:auto;
   -webkit-transform:rotate(2deg);
   -moz-transform:rotate(2deg);
   -o-transform:rotate(2deg);
   transform:rotate(2deg);
}

css文件做好之后，新建一个html文件做测验。文件名不妨叫demo.html，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
<html >
<head>
 <link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<div class="span12 box drop-shadow">
 <center><h2>This is a demo!</h2></center>
</div>
</body>

</html>

注意：此html文件和css文件在同一文件夹下。

保存并打开html文件，就能看到预期效果了。

其中，box的作用是撑起这个『框架』，drop-shadow中的before和after产生框架左右两侧的阴影效果。

Comments

2013-06-23
▲