A collection of 20 advanced CSS tips

Learning to use advanced CSS techniques during the development process is also very beneficial to development. In this article, we will share 20 advanced CSS techniques with you.

1. Black and white image

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

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

/* add border */
.nav li {
  border-right: 1px solid #666;
}
……然后再除去最后一个元素……
// remove border /
.nav li:last-child {
  border-right: none;
}
……可以直接使用 :not() 伪类来应用元素：
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

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

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

.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:

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 row height to body

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

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:

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 HTML list items look like a real, comma-separated list:

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

Use the :not() pseudo-class for the last list item.

7. Use negative nth-child to select items

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

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

8. Use SVG for icons

us There's no reason not to use SVG for icons:

.logo {
  background: url("logo.svg");
}

SVG scales well to all resolution types and supports all browsers All browsers have returned 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:

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:

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

11. Inherit box-sizing

Let box-sizing inherits html:

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

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

12. Table cells have the same width

Tables are troublesome to work with, so be sure to use table-layout: fixed to keep the cells Equal width:

.calendar {
  table-layout: fixed;
}

##13. Use Flexbox to get rid of various hacks on margins

When you need to use column separators, you can get rid of the nth-, first-, and last-child hacks through the space-between property of flexbox:

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

#List separators will now appear at evenly spaced positions.

14. Use the attribute selector for empty links

Display the link when the a element has no text value but the href attribute has a link:

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

Quite convenient.

15. Detect mouse double-click

HTML:

##

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

CSS:

.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 writing triangle

/* 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. Use of CSS3 calc()

calc() usage is similar to a function and can set dynamic values ​​​​for elements:

/* 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 . Text gradient

The text gradient effect is very popular and can be easily achieved using CSS3:

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. Disable mouse events

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

.disabled { pointer-events: none; }

20. 模糊文本

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

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

以上内容就是20 个 CSS 高级技巧汇总，希望能帮助到大家。

相关推荐：

最实用的制作网页小技巧总结

css的开发小技巧

CSS布局有哪些技巧

几个好用的css函数小技巧

最全的CSS开发常用技巧

The above is the detailed content of A collection of 20 advanced CSS tips. For more information, please follow other related articles on the PHP Chinese website!