This article mainly with you to share the CSS advanced skills Summary, 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 border on menu
Add a border to each menu item first
/* 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 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 in IE11 Flexbox
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:
<p class= "Test3" > <span><input type= "text" value= "" readonly= "true"/> <a href= "/http Renpingjun.com ">double Click me</a></span></p>
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;}
CSS write-out triangles
/* Create an arrow, points up */p.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, points down */p.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, points left */p.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, points right */p.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);}