CSS3 Development: 20 commonly used CSS

1. Black and white images

This code will make your color photos appear as black and white photos, is not very 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 () apply/deselect border on menu

Add a border to each menu item first

/* 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 use the: not () pseudo-class to apply the element directly:

. 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. Top of Page Shadow

Here's a simple CSS3 snippet that adds a nice top shadow 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. Add row height to body

You do not need to add line-height to each p,h tag separately. As long as you add to body:

Body {

  Line-height:1;

}

This allows text elements to be easily inherited from the body. 5. Everything is centered vertically

To center all the elements vertically, it's too simple :

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

Note: Be careful with Flexbox in IE11. 6. Comma-delimited list

Make the HTML list item look like a real, comma-delimited list:

UL > Li:not (: Last-child):: After {