20 commonly used CSS techniques

1. Black and white images

This code will make your color photos appear as black and white photos, 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%);
}

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

...and then remove the last element...

// remove border /

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

... You can directly use the :not() pseudo-class to apply elements:

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

This way the code will be clean, easy to read and easy to understand.

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

3. Page top shadow

Below the simple CSS3 code fragment can add a beautiful top shadow effect to the webpage:

Body: BeFore {

Content: "" "" "; top: -10px;
                        left: 0; ,.8);
-moz-box -shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);

4. Add line-height to body


You don’t need to add line-height to each p, h mark, etc. separately. Just add to body:

body {
line-height: 1;
}

This way text elements can easily inherit from body.

5. Center everything vertically

To center all elements 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;

}

Look, is it very simple?

Note: Be careful with flexbox in IE11.


6. Comma-separated list


makes html list items 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 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;}

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 compatibility, and supports all browsers returning to IE9. This way you can avoid .png, .jpg or .gif files.

9. Optimize display text

Sometimes fonts don’t display optimally on all devices, so let your device browser help you:

html {
-moz-osx-font-smoothing : grayscale;
-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

Note: Please use optimizeLegibility responsibly. Also, IE/Edge has no text-rendering support.

10. Use max-height for pure CSS slider

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

11. Inherit box-sizing


Let box-sizing inherit html:

html {
box-sizing: border-box;
}

*, *:before, *:after {

box-sizing: inherit;

}

This makes it easier in plugins or other components that leverage other behaviors The box-sizing has been changed.

12. Table cells are of equal width


Working with tables is very troublesome, so be sure to use table-layout: fixed to keep cells of equal width:

.calendar {
table-layout: fixed;
}

13. Use Flexbox to get rid of various margin hacks

When you need to use column separators, you can get rid of the nth-, first-, and last-child hacks through flexbox's space-between property:

.list {
display: flex;
justify-content : space-between;
}

.list .person {
flex-basis: 23%;
}

Now, list separators will appear at evenly spaced positions.

14. Use 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);
}

Quite convenient.

15. Detect mouse double click

HTML:

Double click me

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 to write triangles

using border to write triangle code and is compatible with IE6.

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

calc() is similar to a function and can set elements Dynamic values:

/* 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

The text gradient effect is very popular, It 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. Disabled Mouse events

CSS3’s new pointer-events allow you to disable mouse events for elements. For example, a link cannot be clicked if the following style is set.

.disabled { pointer-events: none; }

20. Blur text

Simple but beautiful text blur effect, simple and beautiful!

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