A collection of 20 advanced CSS tips

小云云
Release: 2017-12-05 13:29:16
Original
1734 people have browsed it

Learning to use advanced CSS techniques during the development process is also very beneficial to development. In this article, we will share 20 advanced CSS techniques with you.

1. Black and white image

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


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;
}
……然后再除去最后一个元素……
// remove border /
.nav li:last-child {
  border-right: none;
}
……可以直接使用 :not() 伪类来应用元素:
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}
Copy after login


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

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;
}
Copy after login


3. Top shadow of the page

The following simple CSS3 code snippet can add a beautiful top shadow effect to the web 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;
}
Copy after login


4. Add row height to body

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


body {
  line-height: 1;
}
Copy after login


This way text elements can easily inherit from body.

5. Center everything vertically

To center everything 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;
}
Copy after login


Look, isn’t it very simple?

Note: Be careful with flexbox in IE11.

6. Comma-separated list

Make HTML list items look like a real, comma-separated list:


ul > li:not(:last-child)::after {
  content: ",";
}
Copy after login


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;
}
Copy after login


8. Use SVG for icons

us There's no reason not to use SVG for icons:


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


SVG scales well to all resolution types and supports all browsers All browsers have returned to IE9. This way you can avoid .png, .jpg or .gif files.

9. Optimize the display of text

Sometimes, fonts do not display optimally on all devices, so you can let the device browse To help you:


html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
Copy after login


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

10. Use max-height for pure CSS sliders

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;
}
Copy after login


11. Inherit box-sizing

Let box-sizing inherits html:


html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
Copy after login


This makes it easier to change the box-sizing in plugins or other components that leverage other behaviors. sizing.

12. Table cells have the same width

Tables are troublesome to work with, so be sure to use table-layout: fixed to keep the cells Equal width:


.calendar {
  table-layout: fixed;
}
Copy after login


##13. Use Flexbox to get rid of various hacks on margins

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


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


#List separators will now appear at evenly spaced positions.

14. Use the 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);
}
Copy after login


Quite convenient.

15. Detect mouse double-click

HTML:

##

Double click me

Copy after login


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;
}
Copy after login


##16. CSS writing triangle

/* 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;
}
Copy after login



17. Use of CSS3 calc()

calc() usage is similar to a function and can set dynamic values ​​​​for elements:

/* 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);
}
Copy after login



##18 . Text gradient

The text gradient effect is very popular and can be easily achieved 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)));}
Copy after login



19. Disable mouse events

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。


.disabled { pointer-events: none; }
Copy after login


20. 模糊文本

简单但很漂亮的文本模糊效果,简单又好看!


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

以上内容就是20 个 CSS 高级技巧汇总,希望能帮助到大家。

相关推荐:

最实用的制作网页小技巧总结

css的开发小技巧

CSS布局有哪些技巧

几个好用的css函数小技巧

最全的CSS开发常用技巧

The above is the detailed content of A collection of 20 advanced CSS tips. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!