前端笔记:帮助你美化网站的10+实用 CSS3 技巧
CSS3 规范让前端开发人员能够创建出各种复杂的视觉效果,使网站更好看,更能够吸引用户访问。这篇文章中,我收集了一组实用的 CSS3 技巧,能够帮助你美化您的网站,并给它一个更专业的外观和感觉。
黑白图像
下面的 CSS 代码能够把彩色图像转变成黑白风格:
1 2 3 4 5 6 7 | img.desaturate { filter: grayscale( 100% ); -webkit-filter: grayscale( 100% ); -moz-filter: grayscale( 100% ); -ms-filter: grayscale( 100% ); -o-filter: grayscale( 100% ); } |
页面顶部阴影
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | body:before { content : "" ; position : fixed ; top : -10px ; left : 0 ; width : 100% ; height : 10px ; -webkit-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 ); -moz-box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 ); box-shadow: 0px 0px 10px rgba( 0 , 0 , 0 ,. 8 ); z-index : 100 ; } |
检测鼠标双击
不管您相信与否,使用 CSS 就能够检测出元素是否被双击:
HTML:
1 2 3 4 | <div class = "test3" > <span><input type= "text" value= " " readonly= "true" /> <a href= "http://google.com" >Double click me</a></span> </div> |
CSS:
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 | .test 3 span { position : relative ; } .test 3 span a { position : relative ; z-index : 2 ; } .test 3 span a:hover, .test 3 span a:active { z-index : 4 ; } .test 3 span input { background : transparent ; border : 0 ; cursor : pointer ; position : absolute ; top : -1px ; left : 0 ; width : 101% ; /* Hacky */ height : 301% ; /* Hacky */ z-index : 3 ; } .test 3 span input:focus { background : transparent ; border : 0 ; z-index : 1 ; } |
CSS 实现三角形
这其实是一个古老的技巧,不需要用到 CSS3 新特性就能实现:
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 | /* create an arrow that points up */ div.arrow-up { width : 0px ; height : 0px ; border-left : 5px solid transparent ; /* left arrow slant */ border-right : 5px solid transparent ; /* right arrow slant */ border-bottom : 5px solid #2f2f2f ; /* bottom, add background color here */ font-size : 0px ; line-height : 0px ; } /* create an arrow that points down */ div.arrow-down { width : 0px ; height : 0px ; border-left : 5px solid transparent ; border-right : 5px solid transparent ; border-top : 5px solid #2f2f2f ; font-size : 0px ; line-height : 0px ; } /* create an arrow that points left */ div.arrow- left { width : 0px ; height : 0px ; border-bottom : 5px solid transparent ; /* left arrow slant */ border-top : 5px solid transparent ; /* right arrow slant */ border-right : 5px solid #2f2f2f ; /* bottom, add background color here */ font-size : 0px ; line-height : 0px ; } /* create an arrow that points right */ div.arrow- right { width : 0px ; height : 0px ; border-bottom : 5px solid transparent ; /* left arrow slant */ border-top : 5px solid transparent ; /* right arrow slant */ border-left : 5px solid #2f2f2f ; /* bottom, add background color here */ font-size : 0px ; line-height : 0px ; } |
CSS3 calc() 的使用
calc()
用法类似于函数,能够给元素设置动态的值:
1 2 3 4 5 6 7 8 9 10 11 | /* basic calc */ .simpleBlock { width : calc( 100% - 100px ); } /* calc in calc */ .complexBlock { width : calc( 100% - 50% / 3 ); padding : 5px calc( 3% - 2px ); margin-left : calc( 10% + 10px ); } |
文本渐变
文本渐变效果很流行,使用 CSS3 能够很简单就实现:
1 2 3 4 5 6 7 8 9 10 11 | h 2 [data-text] { position : relative ; } h 2 [data-text]::after { content : attr (data-text); z-index : 10 ; color : #e3e3e3 ; position : absolute ; top : 0 ; left : 0 ; -webkit-mask-image: -webkit-gradient(linear, left top , left bottom , from(rgba( 0 , 0 , 0 , 0 )), color-stop( 50% , rgba( 0 , 0 , 0 , 1 )), to(rgba( 0 , 0 , 0 , 0 ))); |
禁用鼠标事件
CSS3 新增的 pointer-events
让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。
1 | .disabled { pointer-events: none ; } |
盒子效果
下面的代码可以实现一个漂亮的盒子效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | p { padding : 5px 10px ; margin : 10px ; background : #ff0030 ; color : #fff ; font-size : 21px ; line-height : 1.3em ; border : 2px dashed #fff ; border-radius: 3px ; -moz-border-radius: 3px ; -webkit-border-radius: 3px ; -moz-box-shadow: 0 0 0 4px #ff0030 , 2px 1px 4px 4px rgba( 10 , 10 , 0 ,. 5 ); -webkit-box-shadow: 0 0 0 4px #ff0030 , 2px 1px 4px 4px rgba( 10 , 10 , 0 ,. 5 ); box-shadow: 0 0 0 4px #ff0030 , 2px 1px 6px 4px rgba( 10 , 10 , 0 ,. 5 ); text-shadow : -1px -1px #aa3030 ; } |
自定义滚动条
过去一直都只有 IE 才能设置滚动条样式,现在好了,Webkit 也提供了设置滚动条的属性:
1 2 3 4 5 6 7 8 9 10 11 12 13 | ::-webkit-scrollbar { width : 12px ; } ::-webkit-scrollbar-track { background : none ; } ::-webkit-scrollbar-thumb { background : -webkit-linear-gradient( left , #547c90 , #002640 ); border : 1px solid #333 ; box-shadow: inset 1px 0 0 rgba( 255 , 255 , 255 , 0.4 ); } |
模糊文本
简单但很漂亮的文本模糊效果,简单又好看!
1 2 3 4 | .blur { color : transparent ; text-shadow : 0 0 5px rgba( 0 , 0 , 0 , 0.5 ); } |
圆角丝带效果
这段代码有点长,但是圆角丝带效果很奇特!
1 2 3 | <div class = "wrapper" > <div class = "ribbon-wrapper-green" ><div class = "ribbon-green" >NEWS</div></div> </div> |
CSS:
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 58 59 60 61 62 63 | .wrapper { margin : 50px auto ; width : 280px ; height : 370px ; background : white ; border-radius: 10px ; -webkit-box-shadow: 0px 0px 8px rgba( 0 , 0 , 0 , 0.3 ); -moz-box-shadow: 0px 0px 8px rgba( 0 , 0 , 0 , 0.3 ); box-shadow: 0px 0px 8px rgba( 0 , 0 , 0 , 0.3 ); position : relative ; z-index : 90 ; } .ribbon-wrapper- green { width : 85px ; height : 88px ; overflow : hidden ; position : absolute ; top : -3px ; right : -3px ; } .ribbon- green { font : bold 15px Sans- Serif ; color : #333 ; text-align : center ; text-shadow : rgba( 255 , 255 , 255 , 0.5 ) 0px 1px 0px ; -webkit-transform: rotate( 45 deg); -moz-transform: rotate( 45 deg); -ms-transform: rotate( 45 deg); -o-transform: rotate( 45 deg); position : relative ; padding : 7px 0 ; left : -5px ; top : 15px ; width : 120px ; background-color : #BFDC7A ; background-image : -webkit-gradient(linear, left top , left bottom , from( #BFDC7A ), to( #8EBF45 )); background-image : -webkit-linear-gradient( top , #BFDC7A , #8EBF45 ); background-image : -moz-linear-gradient( top , #BFDC7A , #8EBF45 ); background-image : -ms-linear-gradient( top , #BFDC7A , #8EBF45 ); background-image : -o-linear-gradient( top , #BFDC7A , #8EBF45 ); color : #6a6340 ; -webkit-box-shadow: 0px 0px 3px rgba( 0 , 0 , 0 , 0.3 ); -moz-box-shadow: 0px 0px 3px rgba( 0 , 0 , 0 , 0.3 ); box-shadow: 0px 0px 3px rgba( 0 , 0 , 0 , 0.3 ); } .ribbon-green:before, .ribbon-green:after { content : "" ; border-top : 3px solid #6e8900 ; border-left : 3px solid transparent ; border-right : 3px solid transparent ; position : absolute ; bottom : -3px ; } .ribbon-green:before { left : 0 ; } .ribbon-green:after { right : 0 ; } |
您可能感兴趣的相关文章
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步