12个CSS3 Box-shadow的创新用法
虽然HTML5和CSS3在国内还没普及,但我觉得我们应该开始使用它,因为目前很多用户已经使用支持HTML5 & CSS3的浏览器了,今天达人为大家分享12个CSS3 Box-shadow的创新用法,box-shadow是CSS3中比较常用的属性之一,希望大家看了后,也尝试在新项目中使用:)
#01 固定导航
CSS样式代码:
.w, .dummy_content { width: 900px; margin: 0 auto; margin-bottom: 40px; } .dummy_content { margin-top:80px; } .dummy_content > p { margin:10px 0 30px; font-family:Arial, Helvetica, sans-serif; line-height:1.8em; } #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; }
#02 二级下位菜单
CSS样式代码:
#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'); }
#03 用box-shadow实现高亮按钮
CSS样式代码:
.blues { color: #fff; width: 190px; height: 35px; cursor: pointer; font-family: Arial, Tahoma, sans-serif; font-size: 1.4em; 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%); }
#04 弹出信息栏(tool tips)
CSS样式代码:
.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; }
#05 苹果网站的一个分栏布局
CSS样式代码:
.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 0 6px 22px; font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; color: #343434; border-right: 1px solid #dadada; } .applewrap .col.last { width: 350px; border-right-color: #fff; } .applewrap .col.last img { float: right; position: relative; top: -20px; } .applewrap .col h2 { font-size: 15px; margin-bottom: 4px; font-weight: bold; }
#06 苹果风格的内容盒子
CSS样式代码:
.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; } .applebox .col p { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; color: #343434; }
#07 Apple风格的链接样式2
CSS样式代码:
.applefeature { height: 150px; margin: 8px; vertical-align: top; display: inline-block; } .applefeature a { display: block; width: 168px; height: 140px; border: 1px solid #ccc; color: #333; text-decoration: none; font-weight: bold; line-height: 1.3em; background: #f7f7f7; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .applefeature a:hover { background: #fafafa; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f7f7f7)); background: -moz-linear-gradient(100% 100% 90deg, #f7f7f7, #fff); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); box-shadow: inset 0 1px 2px rgba(0,0,0,.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .applefeature a img { display: block; margin: 26px auto 4px; } .applefeature a h4 { display: block; width: 160px; font-size: 1.3em; font-family: Arial, Tahoma, sans-serif; color: #646464; text-align: center; } .applefeature a:hover h4 { color: #787878; }
#08 Apple风格的链接样式1
CSS样式代码:
.applefeature { margin: 8px 5px; vertical-align: top; display: inline-block; border:none; -webkit-border-radius:100% / 33px; -moz-border-radius:100% / 33px; border-radius:100% / 33px; -webkit-box-shadow:0 8px 3px -5px rgba(0,0,0,.2); -moz-box-shadow:0 8px 3px -5px rgba(0,0,0,.2); box-shadow:0 8px 3px -5px rgba(0,0,0,.2); } .applefeature a {display:block; cursor:pointer; background:#f6f6f6; background:-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(249,249,249,1)), color-stop(100%, rgba(240,240,240,1))); background:-webkit-linear-gradient(top, rgba(249,249,249,1) 50%, rgba(240,240,240,1) 100%); background: -moz-linear-gradient(top, rgba(249,249,249,1) 50%, rgba(240,240,240,1) 100%); background: -ms-linear-gradient(top, rgba(249,249,249,1) 50%, rgba(240,240,240,1) 100%); background: -o-linear-gradient(top, rgba(249,249,249,1) 50%, rgba(240,240,240,1) 100%); background: linear-gradient(top, rgba(249,249,249,1) 50%, rgba(240,240,240,1) 100%); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 -3px 1px rgba(255,255,255,.6), inset 0 2px 1px rgba(255,255,255,.97), 0 0 3px rgba(0,0,0,.7); -moz-box-shadow:0 -3px 1px rgba(255,255,255,.6), inset 0 2px 1px rgba(255,255,255,.97), 0 0 3px rgba(0,0,0,.7); box-shadow:0 -3px 1px rgba(255,255,255,.6), inset 0 2px 1px rgba(255,255,255,.97), 0 0 1px rgba(0,0,0,.7); } .applefeature a:hover { background:#f0f0f0; background:-webkit-gradient(linear,left top, left bottom, color-stop(50%, rgba(249,249,249,1)), color-stop(100%, rgba(224,224,224,1))); background:-webkit-linear-gradient(top, rgba(249,249,249,1) 50%, rgba(224,224,224,1) 100%); background: -moz-linear-gradient(top, rgba(249,249,249,1) 50%, rgba(224,224,224,1) 100%); background: -ms-linear-gradient(top, rgba(249,249,249,1) 50%, rgba(224,224,224,1) 100%); background: -o-linear-gradient(top, rgba(249,249,249,1) 50%, rgba(224,224,224,1) 100%); background: linear-gradient(top, rgba(249,249,249,1) 50%, rgba(224,224,224,1) 100%); } .applefeature a img { display:block; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
#09 相册图像
CSS样式代码:
.wpframe { background: #fff; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; padding: 8px; -webkit-box-shadow: 1px 2px 1px #d1d1d1; -moz-box-shadow: 1px 2px 1px #d1d1d1; box-shadow: 1px 2px 1px #d1d1d1; }
#10 focus状态文本框样式
CSS样式代码:
.formwrap { display: block; margin-bottom: 9px; } .formwrap label { display: inline-block; width: 80px; font-size: 1.1em; font-weight: bold; color: #444; font-family: Arial, Tahoma, sans-serif; } .formwrap .shadowfield { position: relative; width: 250px; font-size: 17px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: normal; background: #f7f8f8; color: #7c7c7c; line-height: 1.4; padding: 6px 12px; outline: none; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; border: 1px solid #ad9c9c; border-radius: 6px 6px 6px 6px; box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff; } .formwrap .shadowfield:focus { border-color: #930; background: #fff; color: #5d5d5d; box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); -moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); -webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); }
#11 带弹性的按钮
CSS样式代码:
.btn-container { display: inline-block; margin-right: 15px; } .blu-btn { display: inline-block; -moz-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); background-color: #276195; background-image: -khtml-gradient(linear,left top,left bottom,from(#3c88cc),to(#276195)); background-image: -moz-linear-gradient(#3c88cc,#276195); background-image: -ms-linear-gradient(#3c88cc,#276195); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#3c88cc),color-stop(100%,#276195)); background-image: -webkit-linear-gradient(#3c88cc,#276195); background-image: -o-linear-gradient(#3c88cc,#276195); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc',endColorstr='#276195',GradientType=0); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc', endColorstr='#276195', GradientType=0)"; background-image: linear-gradient(#3c88cc,#276195); border: 0; cursor: pointer; color: #fff; text-decoration: none; text-align: center; font-size: 16px; padding: 0px 20px; height: 40px; line-height: 40px; min-width: 100px; text-shadow: 0 1px 0 rgba(0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: all linear .2s; -moz-transition: all linear .2s; -o-transition: all linear .2s; -ms-transition: all linear .2s; transition: all linear .2s } .blu-btn:hover, .blu-btn:focus { -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8; -moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8; box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8; } .blu-btn:active { -webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); } .grn-btn { display: inline-block; -moz-border-radius: .25em; border-radius: .25em; -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2); background-color: #659324; background-image: -khtml-gradient(linear,left top,left bottom,from(#81bc2e),to(#659324)); background-image: -moz-linear-gradient(#81bc2e,#659324); background-image: -ms-linear-gradient(#81bc2e,#659324); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#81bc2e),color-stop(100%,#659324)); background-image: -webkit-linear-gradient(#81bc2e,#659324); background-image: -o-linear-gradient(#81bc2e,#659324); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e',endColorstr='#659324',GradientType=0); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e', endColorstr='#659324', GradientType=0)"; background-image: linear-gradient(#81bc2e,#659324); border: 0; cursor: pointer; color: #fff; text-decoration: none; text-align: center; font-size: 16px; padding: 0px 20px; height: 40px; line-height: 40px; min-width: 100px; text-shadow: 0 1px 0 rgba(0,0,0,0.35); font-family: Arial, Tahoma, sans-serif; -webkit-transition: all linear .2s; -moz-transition: all linear .2s; -o-transition: all linear .2s; -ms-transition: all linear .2s; transition: all linear .2s; } .grn-btn:hover, .grn-btn:focus { -webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26; -moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26; box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26; } .grn-btn:active { -webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3); }
#12 共10个CSS3图片阴影效果
最后最后
对于网页设计CSS3是非常好用的样式代码,它能帮我们实现很多美化效果和简化一些前端代码,所以网页设计师和前端人员都需要学习这门语言,偷偷告诉你们,CSS4好像也快出来了,你们再不学习CSS3就跟不上咯~~~
赞助商链接
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。
博主的分享给力啊,#12的下载页我在FB上分享了,结果只下载了PNG图片,是我走错位置了么?英文不是很好,求分享源码啊,刚好有个幻灯片想要那种效果。
我懂了。。。这是背景图片
对了博主,#12和#11的演示链接重复了。
那个按钮的手感真棒!!
效果给力啊。
效果都很棒,学习了