1. Black and white images

This code will show your color photos as black and white photos, isn’t that 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

Start by adding a border to each menu item

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

… Then remove the last element…

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

… Elements can be applied directly using the: Not () pseudo-class:

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

This makes the code clean, easy to read, and easy to understand.

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

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

3. Shadow at the top of the page

Here is a simple CSS3 code snippet to add a nice top shadow effect to a 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 the code
}


4. Add a line height to the body
You don’t need to add line-height to each p,h, etc. Just add it to body:
body {
  line-height: 1;
}

This allows text elements to be easily inherited from the body.
5. Everything is vertically centered
It’s too easy to center all elements vertically:
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 that easy?
Note: Watch out for Flexbox in IE11.
6. Comma-separated lists
Make an HTML list item 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 to select items 1 through n in CSS.
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:
.logo {
  background: url("logo.svg");
}

SVG scales well for all resolution types and supports regression to IE9 for all browsers. This avoids.png,.jpg, or.gif files.
9. Optimize display text
Sometimes fonts don’t work best on all devices, so let the device browser help you:
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

Note: Please use optimizeLegibility responsibly. In addition, IE /Edge doesn’t have text-rendering support.
10. Use max-height for pure CSS sliders
Use max-height and overflow hiding to implement CSS-only sliders:
.slider ul {
  max-height: 0;
  overlow: hidden;
}
.slider:hover ul {
max-height: 1000px;
transition: .3s ease;
}


11. Inherited box – sizing
Box-sizing inherits HTML:
html {
  box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}


This makes it easier to change box-sizing in plugins or other components of the lever’s other behavior.
12. Table cells are equally wide
Tables are cumbersome to work with, so be sure to use table-layout: fixed to keep cells the same width:
.calendar {
  table-layout: fixed;
}

13. Get rid of margin hacks with Flexbox
When column separators are needed, you can get rid of NTH -, first-, and last-child hacks with flexbox’s space-between property:
.list {
  display: flex;
  justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}


The list separator will now appear at evenly spaced positions.
14. Use property pickers for empty links
Display a 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 double-clicking
HTML:
<div class="test3">
  <span><input type="text" value=" " readonly="true" />
  <a href="http://renpingjun.com">Double click me</a></span>
</div>

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 writes triangles
Use border to write triangle code, and IE6 compatible.
/* 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; }

 17. CSS3The use of calc ()
Calc () is used like a function to assign dynamic values to 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
Text gradients are popular and can be easily implemented 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’s new pointer-Events feature allows you to disable mouse events for elements, for example, a connection that cannot be clicked if it is set to the following style.
.disabled { pointer-events: none; }

20. Obscure text
Simple but very beautiful text blur effect, simple and good-looking!
.blur {
   color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);
}