Summary of 20 advanced CSS Tips

The use of skills will make people become more and more lazy, yes, I just want you to become lazy. Here is my collection of CSS advanced techniques, I hope you lazy out of the realm.

1. Black and white images

This code will make your color photos appear black and white, 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()Apply/deselect borders on a 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:                 

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 { 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 Project 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 for us not to use SVG for icons:

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

SVG has good extensibility for all resolution types and allows all browsers to return to IE9. This avoids. png,. jpg, or. gif files.

9. Optimize display text

Sometimes, fonts don't get the best display on all devices, so you can have your 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 does not have text-rendering support.

10. Use Max-height for pure CSS Sliders

Use max-height and overflow hiding to implement only CSS 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 the box-sizing in other components of the plug-in or leverage other behaviors.

12. Width of table cells

Tables are cumbersome to work with, so be sure to use table-layout:fixed as much as possible to maintain the width of the cell:

.calendar {  table-layout: fixed;}

13. Use Flexbox to get rid of the various hack of the margin

When you need to use the column delimiter, by Flexbox the Space-between property, you can get rid of nth-,first-, and Last-child hack:

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

The list separator now appears at an evenly spaced position.

14. Using the property selector for empty links

When a element does not have a text value, but the href attribute has a link, the link is displayed:

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

Very convenient.

15. Detect mouse Double-click

Html:

class="test3">  <span><input type="text" value=" " readonly="true" /> <a href="http://renpingjun.com">Double click me</a></span></div>

Css:

. test3span {Position:relative;}. test3SpanAposition:relative;Z-index:2;}. test3SpanA: Hover,. test3SpanA: Active {Z-index:4;}. test3SpanInput {Background:transparent;Border0;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;}                 

CSS write-out triangles

/* Create an arrow, points up */Div. arrow-up {Width0px;Height0px;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, points down */Div. arrow-down {Width0px;Height0px;Border-left:5px solid Transparent;Border-right:5px solid Transparent;Border-top:5px Solid#2f2f2f;Font-size:0px;Line-height:0px;}/* Create an arrow, points left */Div. arrow-left {Width0px;Height0px;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, 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;}                

Use of CSS3 calc ()

The Calc () usage is analogous to a function that enables you to set dynamic values for an element:

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

Text gradients are popular, and using CSS3 can be very simple:

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. Disabling mouse events

CSS3 new pointer-events lets you disable mouse events for an element, such as a connection that cannot be clicked if the following style is set.

.disabled { pointer-events: none; }

20. Blurry text

Simple but beautiful text blur effect, simple and good-looking!

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

Summary of 20 advanced CSS Tips