A black and white image when you need to make a color picture appear in black and white, you can use the following code.
img.desaturate{
Filter:grayscale (100%);
-webkit-filter:grayscale (100%);
-moz-filter:grayscale (100%);
-ms-filter:grayscale (100%);
-o-filter:grayscale (100%);
}
Second, use: not () apply/deselect border on menu
Add a border to each menu item first
. Nav li{
border-right:1px solid #666;
}
And then remove the last element
. Nav li:last-child{
Border-right:none;
}
You can also use the: not () pseudo-class to apply the element directly
. Nav li:not (: last-child) {
BORDER-RIGHT:1PX Solid #666
}
If your element has sibling elements, you can also use the Universal Bear End selector (~)
. Nav li:first-child ~ li{
BORDER-LEFT:1PX Solid #666
}
Third, the top of the page shadow
Add a nice top shadow effect 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;
}
Iv. add row height to body
You don't have to give p,h. Add row height, direct:
body{
Line-height:1;
}
Five, everything is vertically centered
html,body{
height:100%;
margin:0;
}
body{
-webkit-align-items:center;
-ms-flex-align:center;
Align-items:center;
Display:-webkit-flex;
Display:flex;
}
IE11 need to pay attention to Flexbox
Six, comma-delimited list
Make an HTML list item look like a real, delimited list
UL > Li:not (: Last-child):: after{
Content: ",";
}
Vii. using negative nth-child to select items
Use negative nth-child in CSS to select items 1 to Project n
Ji=
Display:none;
}
Li:nth-child (-n+3) {
Display:block;
}
Viii. using SVG for icons
. logo{
Background:url ("Logo.svg");
}
Nine, 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;
}
X. Using max-height for pure CSS Sliders
Use max-height and overflow hiding to implement CSS-only sliders
. Slider ul{
max-height:0;
Overflow:hidden;
}
. Slider:hover ul{
max-height:1000px;
Transition:. 3s ease;
}
Xi. Succession of box-sizing
Let box-sizing inherit HTML
html{
Box-sizing:border-box;
}
*,*:before, *:after{
Box-sizing:inherit;
}
12. Width of table cells
. table{
table-layout:fixed;
}
13, with Flexbox to get rid of the various hack outside the distance
When you need to use the column delimiter, you can get rid of Nth-first-last-chlid's hack by Flexbox's Space-between property.
. list{
Display:flex;
Justify-content:space-between;
}
. List. person{
flex-basis:23%;
}
14. Use the attribute 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);
}
XV, double-click Detection mouse
HTML: <div class= "Test" >
<span>
<input type= "text" value= "" readonly= "true"/>
<a href= "http://renpingjun.com" >double Click me</a>
</span>
</div>
Css:.test span{
position:relative;
}
. Test span a{
position:relative;
Z-index:2;
}
. Test span A:hover,.test span a:active{
Z-index:4;
}
. Test span input{
border:0;
Cursor:pointer;
Position:absolute;
Top: -1px;
left:0;
width:101%;
height:301%;
Z-index:3;
}
. Test span input:focus{
border:0;
Z-index:1;
}
16. CSS Write Triangle
div.arrow-up{
width:0px;
height:0px;
border-left:5px solid Transparent;
border-right:5px solid Transparent;
border-bottom:5px solid #ccc;
font-size:0px;
line-height:0px;
}
div.arrow-down{
width:0px;
height:0px;
border-bottom:5px solid Transparent;
border-top:5px solid Transparent;
border-right:5px solid #ccc;
font-size:0px;
line-height:0px;
}
div.arrow-left{
width:0px;
height:0px;
border-bottom:5px solid Transparent;
border-top:5px solid Transparent;
border-left:5px solid #ccc;
font-size:0px;
line-height:0px;
}
div.arrow-right{
width:0px;
height:0px;
border-bottom:5px solid Transparent;
border-top:5px solid Transparent;
border-left:5px solid #ccc;
font-size:0px;
line-height:0px;
}
17, the use of CSS calc ()
The Calc () usage is similar to a function, enabling you to set dynamic values for an element
. simpleblock{
Width:calc (100%-100px);
}
. complexblock{
Width:calc (100%-50%/3);
PADDING:5PX Calc (3%-2px);
Margin-left:calc (10% + 10px);
}
18. Text Gradient
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. Disable Mouse events
. disabled{
Pointer-events:none;
}
20. Fuzzy text
. blur{
Color:transparent;
text-shadow:0 0 5px Rgba (0,0,0,.5);
}
You can get into the group. ~web Front End Interactive group 434623999
More practical CSS advanced tips, there is always one you need!
