20 common CSS tricks

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

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;
}
Copy the code

… Then remove the last element…

// remove border /

.nav li:last-child {
  border-right: none;
}
Copy the code

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

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

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;
}
Copy the code

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;
}
Copy the code

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;
}
Copy the code

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

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;
}
Copy the code

8. Use SVG for ICONS

There is no reason not to use SVG for ICONS:

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

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;
}
Copy the code

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;
}
Copy the code

11. Inherited box – sizing

Box-sizing inherits HTML:

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}
Copy the code

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;
}
Copy the code

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%;
}
Copy the code

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);
}
Copy the code

Quite convenient.

15. Detect double-clicking

HTML:

       

  
        
  Double click me

       
Copy the code

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 the code

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;
}
Copy the code

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);
}
Copy the code

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))); }Copy the code

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; }
Copy the code

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);
}Copy the code

Read more articles:

http://caibaojian.com/css3/

http://caibaojian.com/calc.html

http://caibaojian.com/pointer-events.html

http://caibaojian.com/t/css

Reference: https://segmentfault.com/a/1190000003936841