Home >Web Front-end >CSS Tutorial >Summary and sharing of advanced CSS skills
This code will make your color photo appear as a black and white photo, isn’t it cool?
<br>
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}First add a border to each menu item
<br>
/* add border */
.nav li {
border-right: 1px solid #666;
}Then remove the last element
<br>
// remove border /
.nav li:last-child {
border-right: none;
}You can directly use the :not() pseudo-class to apply elements:
<br>
.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 (~):
<br>
.nav li:first-child ~ li {
border-left: 1px solid #666;
} The following simple CSS3 code snippet can add a beautiful top shadow effect to the web page:
<br>
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;
}You don’t need to add line-height separately to each p,h mark etc. Just add to body:
<br>
body {
line-height: 1;
}This way text elements can easily inherit from body.
To center everything vertically, it’s so easy:
<br>
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 very simple?
Note: Be careful with flexbox in IE11
Make the HTML list items look like a real, comma-separated list:
<br>
ul > li:not(:last-child)::after {
content: ",";
}For the last list item use: not() pseudo-class.
Use negative nth-child in CSS to select item 1 to item n.
<br>
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}There is no reason not to use SVG for icons SVG:
<br/>
.logo {
background: url("logo.svg ");
}
SVG has good performance for all resolution types scalability and supports all browsers returning to IE9. This way you can avoid .png, .jpg or .gif files.
Sometimes, fonts do not display optimally on all devices, so you can let the device browse To help you:
<br>
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.
Use max-height and overflow hiding to implement a CSS-only slider:
<br>
.slider ul {
max-height: 0;
overlow: hidden;
}
.slider:hover ul {
max-height: 1000px;
transition: .3s ease;
}Let box-sizing inherit html :
<br>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}This makes it easier to change box-sizing in plugins or other components that leverage other behaviors.
表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：
<br>
.calendar {
table-layout: fixed;
}当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：
<br>
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}现在，列表分隔符就会在均匀间隔的位置出现。
当a元素没有文本值，但 href 属性有链接的时候显示链接：
<br>
a[href^="http"]:empty::before {
content: attr(href);
}相当方便。
HTML：
<br>
<p class="test3"> <span><input type="text" value=" " readonly="true" /> <a href="http://renpingjun.com">Double click me</a></span> </p>
CSS：
<br>
.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;
}<br/>
/* create an arrow that 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 that 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 that 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 that 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;
}calc() 用法类似于函数，能够给元素设置动态的值：
<br>
/* 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);
}文本渐变效果很流行，使用 CSS3 能够很简单就实现：
<br>
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)));}CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。
<br>
.disabled { pointer-events: none; }简单但很漂亮的文本模糊效果，简单又好看！
<br>
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}相关推荐：
常用的CSS高级技巧_html/css_WEB-ITnose
The above is the detailed content of Summary and sharing of advanced CSS skills. For more information, please follow other related articles on the PHP Chinese website!