使用技巧会让人变的越来越懒,没错,我就是想让你变懒。下面是我收集的CSS高级技巧,希望你懒出境界。
1. 黑白图像
这段代码会让你的彩色照片显示为黑白照片,是不是很酷?
1 img.desaturate { 2 3 filter: grayscale(100%); 4 5 -webkit-filter: grayscale(100%); 6 7 -moz-filter: grayscale(100%); 8 9 -ms-filter: grayscale(100%); 10 11 -o-filter: grayscale(100%); 12 13 }
2. 使用 :not()
在菜单上应用/取消应用边框
先给每一个菜单项添加边框
1 /* add border */ 2 3 .nav li { 4 5 border-right: 1px solid #666; 6 7 }
……然后再除去最后一个元素……
1 // remove border / 2 3 4 .nav li:last-child { 5 6 border-right: none; 7 8 }
……可以直接使用 :not() 伪类来应用元素:
1 .nav li:not(:last-child) { 2 3 border-right: 1px solid #666; 4 5 }
这样代码就干净,易读,易于理解了。
当然,如果你的新元素有兄弟元素的话,也可以使用通用的兄弟选择符(~):
1 .nav li:first-child ~ li { 2 3 4 border-left: 1px solid #666; 5 6 }
3. 页面顶部阴影
下面这个简单的 CSS3 代码片段可以给网页加上漂亮的顶部阴影效果:
1 body:before { 2 3 content: ""; 4 5 position: fixed; 6 7 top: -10px; 8 9 left: 0; 10 11 width: 100%; 12 13 height: 10px; 14 15 16 -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 17 18 -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); 19 20 box-shadow: 0px 0px 10px rgba(0,0,0,.8); 21 22 23 z-index: 100; 24 25 }
4. 给 body 添加行高
你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可:
1 body { 2 3 line-height: 1; 4 5 }
这样文本元素就可以很容易地从 body 继承。
5. 所有一切都垂直居中
要将所有元素垂直居中,太简单了:
1 html, body { 2 3 height: 100%; 4 5 margin: 0; 6 7 } 8 9 10 body { 11 12 -webkit-align-items: center; 13 14 -ms-flex-align: center; 15 16 align-items: center; 17 18 display: -webkit-flex; 19 20 display: flex; 21 22 }
看,是不是很简单。
注意:在IE11中要小心flexbox。
6. 逗号分隔的列表
让HTML列表项看上去像一个真正的,用逗号分隔的列表:
1 ul > li:not(:last-child)::after { 2 3 content: ","; 4 5 }
对最后一个列表项使用 :not() 伪类。
7. 使用负的 nth-child 选择项目
在CSS中使用负的 nth-child 选择项目1到项目n。
1 li { 2 3 display: none; 4 5 } 6 7 8 /* select items 1 through 3 and display them */ 9 10 li:nth-child(-n+3) { 11 12 display: block; 13 14 }
8. 对图标使用 SVG
我们没有理由不对图标使用SVG:
1 .logo { 2 3 background: url("logo.svg"); 4 5 }
SVG对所有的分辨率类型都具有良好的扩展性,并支持所有浏览器都回归到IE9。这样可以避开.png、.jpg或.gif文件了。
9. 优化显示文本
有时,字体并不能在所有设备上都达到最佳的显示,所以可以让设备浏览器来帮助你:
1 html { 2 3 -moz-osx-font-smoothing: grayscale; 4 5 -webkit-font-smoothing: antialiased; 6 7 text-rendering: optimizeLegibility; 8 9 }
注:请负责任地使用 optimizeLegibility。此外,IE /Edge没有 text-rendering 支持。
10. 对纯 CSS 滑块使用 max-height
使用 max-height 和溢出隐藏来实现只有CSS的滑块:
1 .slider ul { 2 3 max-height: 0; 4 5 overlow: hidden; 6 7 } 8 9 10 .slider:hover ul { 11 12 max-height: 1000px; 13 14 transition: .3s ease; 15 16 }
11. 继承 box-sizing
让 box-sizing 继承 html:
1 html { 2 3 box-sizing: border-box; 4 5 } 6 7 8 *, *:before, *:after { 9 10 box-sizing: inherit; 11 12 }
这样在插件或杠杆其他行为的其他组件中就能更容易地改变 box-sizing 了。
12. 表格单元格等宽
表格工作起来很麻烦,所以务必尽量使用 table-layout: fixed 来保持单元格的等宽:
1 .calendar { 2 3 table-layout: fixed; 4 5 }
13. 用 Flexbox 摆脱外边距的各种 hack
当需要用到列分隔符时,通过flexbox的 space-between 属性,你就可以摆脱nth-,first-,和 last-child 的hack了:
1 .list { 2 3 display: flex; 4 5 justify-content: space-between; 6 7 } 8 9 10 .list .person { 11 12 flex-basis: 23%; 13 14 }
现在,列表分隔符就会在均匀间隔的位置出现。
14. 使用属性选择器用于空链接
当a元素没有文本值,但 href 属性有链接的时候显示链接:
1 a[href^="http"]:empty::before { 2 3 content: attr(href); 4 5 }
相当方便。
15. 检测鼠标双击
HTML:
<div class="test3"> <span><input type="text" value=" " readonly="true" /> <a href="http://renpingjun.com">Double click me</a></span> </div>
CSS:
1 .test3 span { 2 3 position: relative; 4 5 } 6 7 .test3 span a { 8 9 position: relative; 10 11 z-index: 2; 12 13 } 14 15 .test3 span a:hover, .test3 span a:active { 16 17 z-index: 4; 18 19 } 20 21 .test3 span input { 22 23 background: transparent; 24 25 border: 0; 26 27 cursor: pointer; 28 29 position: absolute; 30 31 top: -1px; 32 33 left: 0; 34 35 width: 101%; /* Hacky */ 36 37 height: 301%; /* Hacky */ 38 39 z-index: 3; 40 41 } 42 43 .test3 span input:focus { 44 45 background: transparent; 46 47 border: 0; 48 49 z-index: 1; 50 51 }
16. CSS 写出三角形
1 /* create an arrow that points up */ 2 3 div.arrow-up { 4 5 width:0px; 6 7 height:0px; 8 9 border-left:5px solid transparent; /* left arrow slant */ 10 11 border-right:5px solid transparent; /* right arrow slant */ 12 13 border-bottom:5px solid #2f2f2f; /* bottom, add background color here */ 14 15 font-size:0px; 16 17 line-height:0px; 18 19 } 20 21 22 /* create an arrow that points down */ 23 24 div.arrow-down { 25 26 width:0px; 27 28 height:0px; 29 30 border-left:5px solid transparent; 31 32 border-right:5px solid transparent; 33 34 border-top:5px solid #2f2f2f; 35 36 font-size:0px; 37 38 line-height:0px; 39 40 } 41 42 43 /* create an arrow that points left */ 44 45 div.arrow-left { 46 47 width:0px; 48 49 height:0px; 50 51 border-bottom:5px solid transparent; /* left arrow slant */ 52 53 border-top:5px solid transparent; /* right arrow slant */ 54 55 border-right:5px solid #2f2f2f; /* bottom, add background color here */ 56 57 font-size:0px; 58 59 line-height:0px; 60 61 } 62 63 64 /* create an arrow that points right */ 65 66 div.arrow-right { 67 68 width:0px; 69 70 height:0px; 71 72 border-bottom:5px solid transparent; /* left arrow slant */ 73 74 border-top:5px solid transparent; /* right arrow slant */ 75 76 border-left:5px solid #2f2f2f; /* bottom, add background color here */ 77 78 font-size:0px; 79 80 line-height:0px; 81 82 }
17. CSS3 calc() 的使用
calc() 用法类似于函数,能够给元素设置动态的值:
1 /* basic calc */ 2 3 .simpleBlock { 4 5 width: calc(100% - 100px); 6 7 } 8 9 10 /* calc in calc */ 11 12 .complexBlock { 13 14 width: calc(100% - 50% / 3); 15 16 padding: 5px calc(3% - 2px); 17 18 margin-left: calc(10% + 10px); 19 20 }
18. 文本渐变
文本渐变效果很流行,使用 CSS3 能够很简单就实现:
1 h2[data-text] { 2 3 position: relative; 4 5 } 6 7 h2[data-text]::after { 8 9 content: attr(data-text); 10 11 z-index: 10; 12 13 color: #e3e3e3; 14 15 position: absolute; 16 17 top: 0; 18 19 left: 0; 20 21 -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)));}
19. 禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。
1 .disabled { pointer-events: none; }
20. 模糊文本
简单但很漂亮的文本模糊效果,简单又好看!
1 .blur { 2 3 color: transparent; 4 5 text-shadow: 0 0 5px rgba(0,0,0,0.5); 6 7 }
来源:https://segmentfault.com/a/1190000003936841