Summary and sharing of advanced CSS skills

This article mainly shares with you a summary of advanced CSS skills. Using skills will make people become lazier. Yes, I just want to make you lazy. Below are the advanced CSS techniques I have collected. I hope you are too lazy to do so. <br>

1. Black and white image

This code will make your color photo appear as a black and white photo, isn’t it cool?

<br>

1. img.desaturate {
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -ms-filter: grayscale(100%);
     -o-filter: grayscale(100%);
   }

2. Use :not() to apply/unapply borders on the menu

First add a border to each menu item

<br/>

1. /* add border */
   .nav li {
     border-right: 1px solid #666;
   }

Then remove the last element

<br/>

1. // remove border /
   .nav li:last-child {
     border-right: none;
   }

You can directly use the :not() pseudo-class to apply elements:

<br/>

1. .nav li:not(:last-child) {
     border-right: 1px solid #666;
   }

This way the code will be clean, easy to read and easy to understand.

Of course, if your new element has sibling elements, you can also use the universal sibling selector (~):

<br/>

1. .nav li:first-child ~ li {
     border-left: 1px solid #666;
   }

3. Top shadow of the page

The following simple CSS3 code snippet can add a beautiful top shadow effect to the web page:

<br/>

1. 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;
   }

4. Add line-height to body

You don’t need to add line-height separately to each p,h mark etc. Just add to body:

<br/>

1. body {
     line-height: 1;
   }

This way text elements can easily inherit from body.

5. Center everything vertically

To center everything vertically, it’s so easy:

<br/>

1. html, body {
     height: 100%;
     margin: 0;
   }
   body {
     -webkit-align-items: center;  
     -ms-flex-align: center;  
     align-items: center;
     display: -webkit-flex;
     display: flex;
   }

Look, isn’t it very simple?

Note: Be careful with flexbox in IE11

6. Comma separated list

Make the HTML list items look like a real, comma-separated list:

<br/>

1. ul > li:not(:last-child)::after {
     content: ",";
   }

For the last list item use: not() pseudo-class.

7. Use negative nth-child to select items

Use negative nth-child in CSS to select item 1 to item n.

<br/>

1. li {
     display: none;
   }
   /* select items 1 through 3 and display them */
   li:nth-child(-n+3) {
     display: block;
   }

8. Use SVG for icons

There is no reason not to use SVG for icons SVG:

<br/>

1. .logo {

2. background: url("logo.svg ");

3. }

SVG has good performance for all resolution types scalability and supports all browsers returning to IE9. This way you can avoid .png, .jpg or .gif files.

9. Optimize the display of text

Sometimes, fonts do not display optimally on all devices, so you can let the device browse To help you:

<br/>

1. html {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }

Note: Please use optimizeLegibility responsibly. Also, IE/Edge has no text-rendering support.

10. Use max-height for pure CSS sliders

Use max-height and overflow hiding to implement a CSS-only slider:

<br/>

1. .slider ul {
     max-height: 0;
     overlow: hidden;
   }
   .slider:hover ul {
     max-height: 1000px;
     transition: .3s ease;
   }

11. Inherit box-sizing

Let box-sizing inherit html :

<br/>

1. html {
     box-sizing: border-box;
   }
   *, *:before, *:after {
     box-sizing: inherit;
   }

This makes it easier to change box-sizing in plugins or other components that leverage other behaviors.

12. 表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

<br/>

1. .calendar {
     table-layout: fixed;
   }

13. 用 Flexbox 摆脱外边距的各种 hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

<br/>

1. .list {
     display: flex;
     justify-content: space-between;
   }
   .list .person {
     flex-basis: 23%;
   }

现在，列表分隔符就会在均匀间隔的位置出现。

14. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

<br/>

1. a[href^="http"]:empty::before {
     content: attr(href);
   }

相当方便。

15. 检测鼠标双击

HTML：

<br/>

1. <p class="test3">
     <span><input type="text" value=" " readonly="true" />
     <a href="http://renpingjun.com">Double click me</a></span>
   </p>

CSS：

<br/>

1. .test3 span {
     position: relative;
   }
   .test3 span a {
     position: relative;
     z-index: 2;
   }
   .test3 span a:hover, .test3 span a:active {
     z-index: 4;
   }
   .test3 span input {
     background: transparent;
     border: 0;
     cursor: pointer;
     position: absolute;
     top: -1px;
     left: 0;
     width: 101%;  /* Hacky */
     height: 301%; /* Hacky */
     z-index: 3;
   }
   .test3 span input:focus {
     background: transparent;
     border: 0;
     z-index: 1;
   }

16. CSS 写出三角形

<br/>

1. /* create an arrow that points up */
   p.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 */
   p.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 */
   p.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 */
   p.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;
   }

17. CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

<br/>

1. /* 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);
   }

18. 文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

<br/>

1. h2[data-text] {
     position: relative;
   }
   h2[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)));}

19. 禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

<br/>

1. .disabled { pointer-events: none; }

20. 模糊文本

简单但很漂亮的文本模糊效果，简单又好看！

<br/>

1. .blur {
      color: transparent;
      text-shadow: 0 0 5px rgba(0,0,0,0.5);
   }

相关推荐：

CSS高级技巧

常用的CSS高级技巧_html/css_WEB-ITnose

你需要知道的三个CSS技巧

The above is the detailed content of Summary and sharing of advanced CSS skills. For more information, please follow other related articles on the PHP Chinese website!