阴影美图设计

发表于 | 分类于

今天看见过一些比较吸引人的网页效果图，比如博客里的阴影部分，照片的翘角效果。。。今天来实现这些特效功能

阴影部分：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>散文</title>
<style type="text/css">
.wrap{
 width:70%;
 height:200px;
 background:#fff;
}
.effect{
 position:relative;
 box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;
 
}
 .effect:after,.effect:before{
 content:'';
 background:red;
 position:absolute;
 top:50%;
 bottom:0;
 left:20px;
 right:20px;
 box-shadow:0 0 20px rgba(0,0,0,0.3);
 border-radius:100px/10px;
 z-index:-1;
}
</style>
</head>
<body>
<div class="wrap effect">
</div>
 </body>
</html>

###图片翘角效果的实现：

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影</title>
 <link rel="stylesheet" style="text/css" href="style.css">
<style type="text/css">
.box{
 width:980px;
 height:auto;
 margin:20px auto;
 overflow:hidden;
}
.box li{
 width:300px;
 height:210px;
 background:#fff;
 margin:20px 10px;
 float:left;
 border:2px solid #efefef;
 box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 60px rgba(0,0,0,0.1) inset;
 position:relative;
}
.box li:before{
 content:'';
 width:90%;
 height:80%;
 position:absolute;
 left:20px;
 bottom:8px;
 background-color:transparent;
 transform:rotate(-4deg) skew(-12deg);
 box-shadow:0 8px 20px rgba(0,0,0,0.6);
 z-index:-2;
}
.box li:after{
 content:'';
 width:90%;
 height:80%;
 position:absolute;
 left:20px;
 bottom:8px;
 background-color:transparent;
 transform:rotate(4deg) skew(12deg);
 box-shadow:0 8px 20px rgba(0,0,0,0.6);
 z-index:-1;
}
</style>
</head>
<body>
<ul class="box">
 <li><img src="" ></li>
 
</ul>
 </body>
</html>
Fork me on GitHub