在过去几年中，我们看到CSS3 Web开发取得了巨大的进步。互联网上的热门网站已经开始采用许多独特的风格，如圆角和移动响应媒体查询。但更重要的是，这为创意界面打开了大门，可以在几分钟内完成原型设计。
在本文中，我想分享10个与精彩的CSS3盒子阴影设计相关的代码片段。我将解释代码如何工作以及如何将每个框阴影实现到您自己的网站中。
这些风格都归功于其他热门网站的巨大设计影响力。这是当前Web开发人员如何为Web设计的未来构建有影响力的趋势的一个很好的例子。
1.修复顶部工具栏
罗马尼亚社交媒体服务Trilulilu在其整个网站周围使用浮动顶部工具栏。这可以使用position: fixed;任何顶部栏元素上的属性快速创建。但是这个额外的盒子阴影将效果提升到一个全新的水平。
#banner {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}
#banner h1 {
line-height: 60px;
}
你会注意到box-shadow属性实际上是用一个相当简单的值组合设置的。阴影将落在方框下方，两侧模糊3px。
我们可以使用rgba（）方法在阴影上应用轻微的不透明度，因此元素看起来不会太暗。这是一个微妙的补充，肯定会吸引访客的注意力。
2.子导航下拉列表
这是另一个应用于标量下拉子菜单的创意框阴影方法。当您将鼠标悬停在每个顶部主导航链接上时，可以在企业家上看到类似的效果。这绝对是一个比较棘手的配置，但值得耐心。
#bar { display: block; height: 45px; background: #22385a; padding-top: 5px; margin-bottom: 150px; position: relative; }
#bar ul { margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif; }
#bar ul li { background: #22385a; display: block; font-size: 1.2em; position: relative; float: left; }
#bar ul li a {
display: block;
color: #fffff7;
line-height: 45px;
font-weight: bold;
padding: 0px 10px;
text-decoration: none;
z-index: 9999;
}
#bar ul li a:hover, #bar ul li a.selected {
color: #365977;
background: #fff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}
#bar ul .subnav {
display: block;
left: 14px;
top: 48px;
z-index: -1;
width: 500px;
position: absolute;
height: 90px;
border: 1px solid #edf0f3;
border-top: 0;
padding: 10px 0 10px 10px;
overflow: hidden;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333');
}
导航链接可以设置为在选择时或鼠标悬停时更改颜色。我还在链接和下拉菜单框中添加了一些圆形边框。这样可以提供更好的感觉，而不是周围的硬边。我也善用的-ms-filter和filter哪些是仅仅专属于Internet Explorer属性。
如果您设置了完整的导航系统，您将能够将显示设置更改为无，并在页面加载后隐藏菜单。然后使用一些jQuery，您可以定位.hover（）事件并显示带有更新内容的subnav栏。
3.有光泽的阴影按钮
这可能是我最喜欢的样式之一，因为它在页面上显示的动态。如果您不知道，这是您首次登录后在YouTube主页上找到的小蓝色按钮。
blues {
color: #fff;
width: 190px;
height: 35px;
cursor: pointer;
font-family: Arial, Tahoma, sans-serif;
font-size: 1.0em;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-width: 1px;
border-color: #0053a6 #0053a6 #000;
background-color: #6891e7;
background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));
background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);
}
.blues:hover {
border-color: #002d59 #002d59 #000;
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf ,EndColorStr=#0053a6);
background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
}
.blues:active {
border-color: #000 #002d59 #002d59;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);
background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
}
整个按钮代码很多，但我们试图支持尽可能多的浏览器。有文本阴影和框阴影，同时支持MS Internet Explorer 7+。此外，我们background-image使用CSS3渐变设置属性，而不是广泛的供应商特定前缀。
但如果你喜欢这种设计风格，那么悬停和活跃状态也会引起你的注意。我们基本上更新边框以在您向下按下时包含一些阴影，同时更新背景渐变以显示更暗。
由于按钮上没有图像，您可以更新十六进制值并将其变形以实际混合到任何颜色方案中。
4.通知弹出菜单
我不是Facebook的大用户，但我注意到他们重新设计的一些UI技术。此弹出菜单可与主页上的通知或朋友请求弹出窗口进行比较。
.flyout {
width: 310px;
margin-top: 10px;
font-size: 11px;
position: relative;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
background-color: white;
padding: 9px 11px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #c5c5c5;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.flyout #tip {
background-image: url('images/tip.png');
background-repeat: no-repeat;
background-size: auto;
height: 11px;
position: absolute;
top: -11px;
left: 25px;
width: 20px;
}
.flyout h2 {
text-transform: uppercase;
color: #666;
font-size: 1.2em;
padding-bottom: 5px;
margin-bottom: 12px;
border-bottom: 1px solid #dcdbda;
}
.flyout p { padding-bottom: 25px; font-size: 1.1em; color: #222; }
这里没有很多新的令人费解的代码。我正在使用一个.tip带有内部span元素的小类来添加工具提示三角形。可以创建纯CSS3三角形，但这种方法并不容易，您可以想象。如果您更喜欢这种方法，可能值得一起黑客攻击。但是到处都不支持CSS3旋转属性; 同时图像不需要任何后退方法。
5. Apple Page Wrapper
您可以在Apple的官方网站上找到许多令人印象深刻的CSS3盒子阴影。下面的示例是一个带有几个列跨度的小盒子容器。在查看Apple的布局时，您会注意到他们的许多页面都由许多包装盒组成。
.applewrap {
width: 100%;
display: block;
height: 150px;
background: white;
border: 1px solid;
border-color: #e5e5e5 #dbdbdb #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}
.applewrap .col {
float: left;
box-sizing: border-box;
width: 250px;
height: 150px;
padding: 16px 7px 6px 22px;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #343434;
border-right: 1px solid #dadada;
}
您可以将由各种宽度和高度的内容框拆分的类似页面组合在一起。虽然我在这个演示中添加了几个列，但它绝不是必要的格式化技术。盒子阴影最适合白色/灰色背景。但我认为在任何浅色上显示都会看起来很不错。
6. Apple内容盒
Apple网站上的其他内容框主要用于列设计。这些主要位于展示交易和其他相关信息的页面底部。这是一种完全不同的设计风格，盒子阴影从上到下显示在里面。
.applebox {
width: auto;
height: 85px;
box-sizing: border-box;
background: #f5f5f5;
padding: 20px 20px 10px;
margin: 10px 0 20px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
}
.applebox .col {
width: 140px;
float: left;
margin: 0 0 0 30px;
}
我认为这段代码不太难以遵循并复制到另一个div容器上。我们应用的唯一框阴影是使用rgba alpha透明颜色代码插入。因此，虽然我们将投影设置为纯黑色，但我们只显示了大约30％的不透明度。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/262793.html