1. Black-and-white images

This code will make your color photos appear as black-and-white photos, is 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 / cancel the application border on the menu

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

... You can apply elements directly using: not() pseudo-classes:

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

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

Of course, if your new element has a sibling element, 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

The following simple CSS3 code snippet can add a beautiful top shadow effect to the 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. Adding row height to body

You don't need to add line-height to each p,h tag, etc. Just add to body:

body {  line-height: 1;}

This allows text elements to be easily inherited from 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, is it simple?

Note: Be careful of 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: not() pseudoclass for the last list item.

7. Select projects using negative nth-child

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

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 has good scalability for all resolution types and supports all browsers to return to IE9. This avoids. png,. jpg, or. gif files.

9. Optimizing Text Display

Sometimes, fonts don't display 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 optimize Legibility responsibly. In addition, IE/Edge does not 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. Inheriting box-sizing

Let box-sizing inherit html:

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

This makes it easier to change box-sizing in plug-ins or other components that leverage other behavior.

12. Equal Width of Table Cells

Tables are cumbersome to work with, so try to use table-layout: fixed to keep the cell width equal:

.calendar {  table-layout: fixed;}

13. Various hack s with Flexbox to get rid of outer margins

When column separators are needed, you can get rid of nth-, first-, and last-child hack s by using flexbox's space-between attribute:

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

Now, the list separator appears at even intervals.

14. Use attribute selectors for empty links

When the a element has no text value, but the href attribute has a link, the link is displayed:

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

It's quite convenient.

15. Detect mouse double-click

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

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

Cal () is similar to a function in that it 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

Text gradient effect is very popular, using CSS3 can be very simple to achieve:

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

The new pointer-events in CSS3 allow you to disable mouse events for elements, such as a connection that cannot be clicked if the following style is set.

.disabled { pointer-events: none; }

20. Fuzzy Text

Simple but beautiful text blurring effect, simple and beautiful!

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