| 收藏本站 | 关于我们
首页 免费模板 收费模板 部分案例 分类模板 地方门户 二次修改 服务定制 酷站欣赏 设计学院 特效代码 字体下载
当前位置：首页 >> PhotoShop教程 >> 基础知识
CSS3 PK Photoshop：圆角和框投影(四)
编辑发布：飞将军   点击量：6710

第三步：导航栏制作

我们要结合圆角，渐变填充以及框投影制作一个导航栏。你通常使用Photoshop创建一个图形，如果你愿意立刻开始，也可以从页面顶部下载源文件。

接下来，有趣的部分来了，我们要用CSS3得到（跟Photoshop）同样的效果。

首先，我使用了HTML的“nav”标签，这个标签非常酷，并且语法简单，但是你也可以使用div层来代替。

01
02
03
04
05
06
07
08
09
10

 

第四步：写CSS代码

现在我们跳转到CSS代码实现部分，首先，设置位置和高度。

}
 
nav.horizontal h
3{
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
nav.horizontal{

    
padding-bottom

:20px;
}
 
nav.horizontal ul{
    
height:50px;
}
 
nav.horizontal ul li{
    
list-style:none;
    
display:inline;
    
float:left;
}
 
nav.horizontal ul li a{
    
display:block;
    
height:28px;
    
margin:2px 6px 2px 6px;
    
padding:15px 20px 0px 20px;
}
 
nav.horizontal ul li a:hover{
}

然后进行渐变填充：

 
nav.horizontal h
3{
01
02
03
04
05
06
07
08
09
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
nav.horizontal{
}
padding-bottom
:

20px;
}
 
nav.horizontal ul{
height
:50px;
 
background-image
:-moz-linear-gradient(top, #93C204, #608009);
background-image
: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
 
border
:1px solid #608009;
}
 
nav.horizontal ul li{
list-style
:none;
display
:inline;
float
:left;
}
 
nav.horizontal ul li a{
display
:block;
height
:28px;
margin
:2px 6px 2px 6px;
padding
:15px 20px 0px 20px;
 
font-size
:12px;
font-weight
:bold;
color
:#FFF;
text-transform
:uppercase;
text-decoration
:none;
 
border
:1px solid transparent;
background-image
:none;
}
 
nav.horizontal ul li a:hover{
background-image
:-moz-linear-gradient(top, #161616, #2B3615);
background-image
: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
 
border
:1px solid #A3D804;
}

接下是，制作圆角：

 
nav.horizontal h
3{
01
02
03
04
05
06
07
08
09
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
58
59
nav.horizontal{
}
padding-bottom
:

20px;
}
 
nav.horizontal ul{
height
:50px;
 
background-image
:-moz-linear-gradient(top, #93C204, #608009);
background-image
: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
 
-moz-border-radius:
8px;
-webkit-border-radius:
8px;
-khtml-border-radius:
8px;
border-radius:
8px;
 
border
:1px solid #608009;
}
 
nav.horizontal ul li{
list-style
:none;
display
:inline;
float
:left;
}
 
nav.horizontal ul li a{
display
:block;
height
:28px;
margin
:2px 6px 2px 6px;
padding
:15px 20px 0px 20px;
 
font-size
:12px;
font-weight
:bold;
color
:#FFF;
text-transform
:uppercase;
text-decoration
:none;
 
border
:1px solid transparent;
background-image
:none;
 
-moz-border-radius:
10px;
-webkit-border-radius:
10px;
-khtml-border-radius:
10px;
border-radius:
10px;
}
 
nav.horizontal ul li a:hover{
background-image
:-moz-linear-gradient(top, #161616, #2B3615);
background-image
: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
 
-moz-border-radius:
10px;
-webkit-border-radius:
10px;
-khtml-border-radius:
10px;
border-radius:
10px;
 
border
:1px solid #A3D804;
}

最后，添加框效果：

 
nav.horizontal h
3{
01
02
03
04
05
06
07
08
09
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
58
59
60
61
62
63
64
65
66
67
nav.horizontal{
}
    
padding-bottom

:20px;
}
 
nav.horizontal ul{
    
height:50px;
 
    
background-image:-moz-linear-gradient(top, #93C204, #608009);
    
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#93C204), to(#608009), color-stop(1,#608009));
 
    
-moz-border-radius: 8px;
    
-webkit-border-radius: 8px;
    
-khtml-border-radius: 8px;
    
border-radius: 8px;
 
    
border:1px solid #608009;
 
    
box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
    
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
    
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.25);
}
 
nav.horizontal ul li{
    
list-style:none;
    
display:inline;
    
float:left;
}
 
nav.horizontal ul li a{
    
display:block;
    
height:28px;
    
margin:2px 6px 2px 6px;
    
padding:15px 20px 0px 20px;
 
    
font-size:12px;
    
font-weight:bold;
    
color:#FFF;
    
text-transform:uppercase;
    
text-decoration:none;
 
    
border:1px solid transparent;
    
background-image:none;
 
    
-moz-border-radius: 10px;
    
-webkit-border-radius: 10px;
    
-khtml-border-radius: 10px;
    
border-radius: 10px;
}
 
nav.horizontal ul li a:hover{
    
background-image:-moz-linear-gradient(top, #161616, #2B3615);
    
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#161616), to(#2B3615), color-stop(1,#2B3615));
 
    
-moz-border-radius: 10px;
    
-webkit-border-radius: 10px;
    
-khtml-border-radius: 10px;
    
border-radius: 10px;
 
    
border:1px solid #A3D804;
 
    
box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
    
-moz-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
    
-webkit-box-shadow: inset 4px 4px 4px rgba(0,0,0,0.25);
}

点击查看：演示地址

第五步：去掉溢出颜色

最后一点需要注意的是，使用了填充和边框的圆角的会造成颜色溢出。你会在鼠标悬停在导航栏按钮时看到颜色溢出。

我们可以通过背景剪切属性进行修复，这取决于给定元素背景是否扩展了边框。默认是border-box，造成混乱得颜色溢出，但是我们可以把它改为padding-box，

把下面的CSS代码添加到按钮上：

:block;
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
nav.horizontal ul li a{
    
display

    
height:28px;
    
margin:2px 6px 2px 6px;
    
padding:15px 20px 0px 20px;
 
    
font-size:12px;
    
font-weight:bold;
    
color:#FFF;
    
text-transform:uppercase;
    
text-decoration:none;
 
    
border:1px solid transparent;
    
background-image:none;
 
    
-moz-border-radius: 10px;
    
-webkit-border-radius: 10px;
    
-khtml-border-radius: 10px;
    
border-radius: 10px;
 
    
-moz-background-clip: padding;
    
-webkit-background-clip: padding-box;
    
background-clip: padding-box;
}

当鼠标悬停时，得到更符合我们要求的效果：

总结

用CSS3创建一个漂亮的，简洁的导航栏比以前更简单，更快。下一次设计中赶紧试试吧。希望本教程对你有帮助，谢谢！

点击查看：演示地址

注明：本文由站长之家编辑编译，未经允许不得转载，如需转载请联系pj@chinaz.com。
首页 上一页 1 2 3 4 下一页 尾页 4/4/4
上一篇：没有了下一篇：PS电影海报添加电光效果
 服务流程 | 积分说明 | 使用说明 | 粤ICP备17004399号 电视直播 | QQ头像获取