Bookmark and Share

Lee's 程序人生

HTML CSS Javascript XML AJAX ATLAS C# C++ 数据结构 软件工程 设计模式 asp.net Java 数字图象处理 Sql 数据库
  博客园  :: 首页  :: 新随笔  :: 联系 :: 管理

网页设计:使用 CSS3 Box Shadow 实现的 10 个创新技术

Posted on 2013-01-30 14:57  analyzer  阅读(432)  评论(0编辑  收藏  举报

1. 固定的顶部工具栏

Trilulilu fixed top toolbar box shadow

在线演示

代码:

01 #banner {
02 positionfixed;
03 height60px;
04 width100%;
05 top0;
06 left0;
07 border-top5px solid #a1cb2f;
08 background#fff;
09 -moz-box-shadow: 0 2px 3px 0px rgba(0000.16);
10 -webkit-box-shadow: 0 2px 3px 0px rgba(0000.16);
11 box-shadow: 0 2px 3px 0px rgba(0000.16);
12 z-index999999;
13 }
14  
15 #banner h1 {
16     line-height60px;
17 }

 

2. 下列式导航菜单

在线演示

代码:

01 #bar { displayblockheight45pxbackground#22385apadding-top5pxmargin-bottom150pxpositionrelative; }
02 #bar ul { margin0px15pxfont-family: Candara, Calibri, "Segoe UI", Segoe, Arialsans-serif; }
03 #bar ul li {  background#22385adisplayblockfont-size1.2empositionrelativefloatleft; }
04 #bar ul li a {
05 displayblock;
06 color#fffff7;
07 line-height45px;
08 font-weightbold;
09 padding0px10px;
10 text-decorationnone;
11 z-index9999;
12 }
13  
14 #bar ul li a:hover, #bar ul li a.selected {
15 color#365977;
16 background#fff;
17 border-top-left-radius: 3px;
18 border-top-right-radius: 3px;
19 -webkit-border-top-left-radius: 3px;
20 -webkit-border-top-right-radius: 3px;
21 -moz-border-radius-topleft: 3px;
22 -moz-border-radius-topright: 3px;
23 }
24  
25 #bar ul .subnav {
26 displayblock;
27 left14px;
28 top48px;
29 z-index-1;
30 width500px;
31 positionabsolute;
32 height90px;
33 border1px solid #edf0f3;
34 border-top0;
35 padding10px 0 10px10px;
36 overflowhidden;
37 -moz-border-radius-bottomleft: 3px;
38 -moz-border-radius-bottomleft: 3px;
39 -webkit-border-bottom-left-radius: 3px;
40 -webkit-border-bottom-right-radius: 3px;
41 border-bottom-right-radius: 3px;
42 border-bottom-right-radius: 3px;
43 -moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
44 -webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
45 box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
46 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333')";
47 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333');
48 }

3. 带光泽阴影按钮

 

jsFiddle YouTube blue CSS3 gradient box-shadow button

在线演示

代码:

01 blues {
02 color#fff;
03 width190px;
04 height35px;
05 cursorpointer;
06 font-familyArialTahomasans-serif;
07 font-size1.0em;
08 font-weightbold;
09 -moz-border-radius: 2px;
10 -webkit-border-radius: 2px;
11 border-radius: 2px;
12 border-width1px;
13 border-color#0053a6 #0053a6 #000;
14 background-color#6891e7;
15 background-image: -moz-linear-gradient(top,#4495e7 0#0053a6 100%);
16 background-image: -ms-linear-gradient(top,#4495e7 0#0053a6 100%);
17 background-image: -o-linear-gradient(top,#4495e7 0#0053a6 100%);
18 background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0#4495e7),color-stop(100%#0053a6));
19 background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
20 background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
21 text-shadow1px 1px 0 rgba(000, .6);
22 -moz-box-shadow: inset 0 1px 0 rgba(256256256, .35);
23 -ms-box-shadow: inset 0 1px 0 rgba(256256256, .35);
24 -webkit-box-shadow: inset 0 1px 0 rgba(256256256, .35);
25 box-shadow: inset 0 1px 0 rgba(256256256, .35);
26 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);
27 }
28  
29 .blues:hover {
30 border-color#002d59 #002d59 #000;
31 -moz-box-shadow: inset 0 1px 0 rgba(2562562560.55), 1px 1px 3pxrgba(0000.25);
32 -ms-box-shadow: inset 0 1px 0 rgba(2562562560.55), 1px 1px 3pxrgba(0000.25);
33 -webkit-box-shadow: inset 0 1px 0 rgba(2562562560.55), 1px 1px 3pxrgba(0000.25);
34 box-shadow: inset 0 1px 0 rgba(2562562560.55), 1px 1px 3pxrgba(000, .25);
35 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf,EndColorStr=#0053a6);
36 background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
37 background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
38 background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
39 background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
40 background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
41 background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
42 }
43  
44 .blues:active {
45 border-color#000 #002d59 #002d59;
46 -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
47 -ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
48 -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
49 box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
50 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);
51 background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
52 background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
53 background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
54 background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
55 background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
56 background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
57 }

 

4. 弹出通知栏

 

Facebook notifications box shadow popup display

在线演示

 

代码:

01 .flyout {
02 width310px;
03 margin-top10px;
04 font-size11px;
05 positionrelative;
06 font-family'Lucida Grande'TahomaVerdanaArialsans-serif;
07 background-colorwhite;
08 padding9px 11px;
09 background: rgba(2552552550.9);
10 border1px solid #c5c5c5;
11 -webkit-box-shadow: 0 3px 8px rgba(000, .25);
12 -moz-box-shadow: 0 3px 8px rgba(000, .25);
13 box-shadow: 0 3px 8px rgba(000, .25);
14 -webkit-border-radius: 3px;
15 -moz-border-radius: 3px;
16 border-radius: 3px;
17 }
18  
19 .flyout #tip {
20 background-imageurl('images/tip.png');
21 background-repeatno-repeat;
22 background-sizeauto;
23 height11px;
24 positionabsolute;
25 top-11px;
26 left25px;
27 width20px;
28 }
29  
30 .flyout h2 {
31 text-transformuppercase;
32 color#666;
33 font-size1.2em;
34 padding-bottom5px;
35 margin-bottom12px;
36 border-bottom1px solid #dcdbda;
37 }
38 .flyout p { padding-bottom25pxfont-size1.1emcolor#222; }

 

5. 苹果页面包装

 

CSS3 Apple display banner box-shadow styles

在线演示

代码:

01 .applewrap {
02 width100%;
03 displayblock;
04 height150px;
05 backgroundwhite;
06 border1px solid;
07 border-color#e5e5e5 #dbdbdb #d2d2d2;
08 -webkit-border-radius: 4px;
09 -moz-border-radius: 4px;
10 border-radius: 4px;
11 -webkit-box-shadow: rgba(0000.30 1px 3px;
12 -moz-box-shadow: rgba(0,0,0,0.30 1px 3px;
13 box-shadow: rgba(0000.30 1px 3px;
14 }
15  
16  
17 .applewrap .col {
18 floatleft;
19 box-sizing: border-box;
20 width250px;
21 height150px;
22 padding16px 7px 6px 22px;
23 font12px/18px"Lucida Grande""Lucida Sans Unicode"HelveticaArialVerdanasans-serif;
24 color#343434;
25 border-right1px solid #dadada;
26 }

 

6. 苹果内容框效果

 

Apple CSS3 box-shadow inset display styles

在线演示

 

 

代码:

01 .applebox {
02 widthauto;
03 height85px;
04 box-sizing: border-box;
05 background#f5f5f5;
06 padding20px 20px 10px;
07 margin10px 0 20px;
08 border1px solid #ccc;
09 border-radius: 4px;
10 -webkit-border-radius: 4px;
11 -moz-border-radius: 4px;
12 -o-border-radius: 4px;
13 -webkit-box-shadow: inset 0px 1px 1px rgba(000, .3);
14 -moz-box-shadow: inset 0px 1px 1px rgba(000, .3);
15 box-shadow: inset 0px 1px 1px rgba(000, .3);
16 }
17  
18 .applebox .col {
19 width140px;
20 floatleft;
21 margin0 0 0 30px;
22 }

 

7. 精选链接

 

Apple iCloud featured anchor link boxes

在线演示

代码:

01 .applefeature {
02 height150px;
03 margin8px;
04 vertical-aligntop;
05 display: inline-block;
06 }
07  
08 .applefeature a {
09 displayblock;
10 width168px;
11 height140px;
12 border1px solid #ccc;
13 color#333;
14 text-decorationnone;
15 font-weightbold;
16 line-height1.3em;
17 background#f7f7f7;
18 -webkit-box-shadow: inset 0 1px 2px rgba(000, .3);
19 -moz-box-shadow: inset 0 1px 2px rgba(000, .3);
20 box-shadow: inset 0 1px 2px rgba(000, .3);
21 -webkit-border-radius: 4px;
22 -moz-border-radius: 4px;
23 border-radius: 4px;
24 }
25 .applefeature a:hover {
26 background#fafafa;
27 background: -webkit-gradient(linear, 0% 0%0% 100%, from(#fff), to(#f7f7f7));
28 background: -moz-linear-gradient(100% 100% 90deg, #f7f7f7#fff);
29 -webkit-box-shadow: inset 0 1px 2pxrgba(0,0,0,.3);
30 -moz-box-shadow: inset 0 1px 2pxrgba(0,0,0,.3);
31 box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
32 -webkit-border-radius: 4px;
33 -moz-border-radius: 4px;
34 border-radius: 4px;
35 }
36  
37 .applefeature a img {
38 displayblock;
39 margin26px auto 4px;
40 }
41 .applefeature a h4 {
42 displayblock;
43 width160px;
44 font-size1.3em;
45 font-familyArialTahomasans-serif;
46 color#646464;
47 text-aligncenter;
48 }

 

8. 帧内图片

 

Wordpress image frame CSS3 box shadow

在线演示

代码:

01 .wpframe {
02 background#fff;
03 border-radius: 2px;
04 -webkit-border-radius: 2px;
05 -moz-border-radius: 2px;
06 padding8px;
07 -webkit-box-shadow: 1px 2px 1px #d1d1d1;
08 -moz-box-shadow: 1px 2px 1px #d1d1d1;
09 box-shadow: 1px 2px 1px #d1d1d1;
10 }

 

9. 具有焦点亮度效果的文本框

 

CSS3 Pinterest input fields box shadow design

在线演示

 

代码:

01 .formwrap { displayblockmargin-bottom15px; }
02 .formwrap label {
03 display: inline-block;
04 width80px;
05 font-size11px;
06 font-weightbold;
07 color#444;
08 font-familyArialTahomasans-serif;
09 }
10  
11 .formwrap .shadowfield {
12 positionrelative;
13 width250px;
14 font-size17px;
15 font-family"Helvetica Neue"Arialsans-serif;
16 font-weightnormal;
17 background#f7f8f8;
18 color#7c7c7c;
19 line-height1.4;
20 padding6px 12px;
21 outlinenone;
22 transition: all 0.2s ease-in-out 0s;
23 -webkit-transition: all 0.2s ease-in-out 0s;
24 -moz-transition: all 0.2s ease-in-out 0s;
25 border1px solid #ad9c9c;
26 border-radius: 6px 6px 6px 6px;
27 box-shadow: 0 1px rgba(3425250.2inset0 1px #fff;
28 }
29 .formwrap .shadowfield:focus {
30 border-color#930;
31 background#fff;
32 color#5d5d5d;
33 box-shadow: inset 0 1px rgba(3425250.2), 0 1px rgba(2552552550.6), 00 7px rgba(23582820.5);
34 -moz-box-shadow: inset 0 1px rgba(3425250.2), 0 1pxrgba(2552552550.6), 0 0 7px rgba(23582820.5);
35 -webkit-box-shadow: inset 0 1px rgba(3425250.2), 0 1pxrgba(2552552550.6), 0 0 7px rgba(23582820.5);
36 }

 

10. 弹性阴影按钮

 

jsFiddle Mozilla glossy box-shadow buttons

在线演示

代码:

01 .blu-btn {
02 display: inline-block;
03 -moz-border-radius: .25em;
04 border-radius: .25em;
05 -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
06 -moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
07 box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
08 background-color#276195;
09 background-image: -moz-linear-gradient(#3c88cc,#276195);
10 background-image: -ms-linear-gradient(#3c88cc,#276195);
11 background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0%,#3c88cc),color-stop(100%,#276195));
12 background-image: -webkit-linear-gradient(#3c88cc,#276195);
13 background-image: -o-linear-gradient(#3c88cc,#276195);
14 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc',endColorstr='#276195',GradientType=0);
15 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc', endColorstr='#276195', GradientType=0)";
16 background-image: linear-gradient(#3c88cc,#276195);
17 border0;
18 cursorpointer;
19 color#fff;
20 text-decorationnone;
21 text-aligncenter;
22 font-size16px;
23 padding0px 20px;
24 height40px;
25 line-height40px;
26 min-width100px;
27 text-shadow0 1px 0 rgba(0,0,0,0.35);
28 font-familyArialTahomasans-serif;
29 -webkit-transition: all linear .2s;
30 -moz-transition: all linear .2s;
31 -o-transition: all linear .2s;
32 -ms-transition: all linear .2s;
33 transition: all linear .2s
34 }
35 .blu-btn:hover, .blu-btn:focus {
36 -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
37 -moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
38 box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 012px 20px 2px #3089d8;
39 }
40 .blu-btn:active {
41 -webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
42 -moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
43 box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
44 }
45  
46  
47 .grn-btn {
48 display: inline-block;
49 -moz-border-radius: .25em;
50 border-radius: .25em;
51 -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
52 -moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
53 box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
54 background-color#659324;
55 background-image: -moz-linear-gradient(#81bc2e,#659324);
56 background-image: -ms-linear-gradient(#81bc2e,#659324);
57 background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0%,#81bc2e),color-stop(100%,#659324));
58 background-image: -webkit-linear-gradient(#81bc2e,#659324);
59 background-image: -o-linear-gradient(#81bc2e,#659324);
60 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e',endColorstr='#659324',GradientType=0);
61 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e', endColorstr='#659324', GradientType=0)";
62 background-image: linear-gradient(#81bc2e,#659324);
63 border0;
64 cursorpointer;
65 color#fff;
66 text-decorationnone;
67 text-aligncenter;
68 font-size16px;
69 padding0px 20px;
70 height40px;
71 line-height40px;
72 min-width100px;
73 text-shadow0 1px 0 rgba(0,0,0,0.35);
74 font-familyArialTahomasans-serif;
75 -webkit-transition: all linear .2s;
76 -moz-transition: all linear .2s;
77 -o-transition: all linear .2s;
78 -ms-transition: all linear .2s;
79 transition: all linear .2s;
80 }
81 .grn-btn:hover, .grn-btn:focus {
82 -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
83 -moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
84 box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 012px 20px 2px #85ca26;
85 }
86 .grn-btn:active {
87 -webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
88 -moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
89 box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
90 }
我要啦免费统计