A collection of 20 advanced CSS tips-CSS Tutorial-php.cn

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%);
}

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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: ",";
}

Copy after login

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

Copy after login

8. Use SVG for icons

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

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

Copy after login

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

Copy after login

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

Copy after login

11. Inherit box-sizing

Let box-sizing inherits html:

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

Copy after login

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

Copy after login

##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%;
}

Copy after login

#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);
}

Copy after login

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>

Copy after login

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

Copy after login

##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;
}

Copy after login

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);
}

Copy after login

##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)));}

Copy after login

19. Disable mouse events

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

.disabled { pointer-events: none; }

Copy after login

20. 模糊文本

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

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

Copy after login

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