Maison >interface Web >tutoriel CSS >Synthèse et partage des compétences CSS avancées

Synthèse et partage des compétences CSS avancées

小云云original: 2018-02-28 09:35:171453parcourir

Cet article partage principalement avec vous un résumé des compétences CSS avancées. L'utilisation des compétences rendra les gens de plus en plus paresseux. Oui, je veux juste vous rendre paresseux. Vous trouverez ci-dessous les techniques CSS avancées que j'ai collectées. J'espère que vous êtes trop paresseux pour le faire. <br>

1. Image en noir et blanc

Ce code fera apparaître vos photos couleur comme des photos en noir et blanc, n'est-ce pas ? c'est cool ?

<br>

img.desaturate {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
}

2. Utilisez :not() pour appliquer/désappliquer les bordures du menu

Ajoutez d'abord une bordure à chaque élément de menu

<br>

/* add border */
.nav li {
  border-right: 1px solid #666;
}

puis supprimez le dernier one Elements

<br>

// remove border /
.nav li:last-child {
  border-right: none;
}

peut directement utiliser la pseudo-classe :not() pour appliquer des éléments :

<br>

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

De cette façon, le code est propre, facile à lire et à comprendre.

Bien sûr, si votre nouvel élément comporte des éléments frères, vous pouvez également utiliser le sélecteur universel de frères et sœurs (~) :

<br>

.nav li:first-child ~ li {
  border-left: 1px solid #666;
}

3. Ombre du haut de la page

L'extrait de code CSS3 simple suivant peut ajouter un bel effet d'ombre supérieure à la page Web :

<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;
}

4. Ajoutez la hauteur de la ligne au corps

Vous vous n'avez pas besoin d'ajouter une hauteur de ligne à chaque marque p, h, etc. individuellement. Ajoutez simplement au corps :

<br>

```
body {
  line-height: 1;
}
```

De cette façon, les éléments de texte peuvent facilement hériter du corps.

5. Centrez tout verticalement

Pour tout centrer verticalement, c'est si simple :

<br>

html, body {
  height: 100%;
  margin: 0;
}
body {
  -webkit-align-items: center;  
  -ms-flex-align: center;  
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

Ecoute, n'est-ce pas très simple.

Remarque : soyez prudent avec flexbox dans IE11

6. Liste séparée par des virgules

Créez Les éléments de la liste HTML ressemblent à une vraie liste séparée par des virgules :

<br>

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

pour le dernier élément de la liste utilisé. la pseudo-classe :not().

7. Utilisez un nième enfant négatif pour sélectionner les éléments

Utilisez un nième enfant négatif en CSS pour sélectionner l'élément 1 à l'élément n.

<br>

li {
  display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
  display: block;
}

8. Utilisez SVG pour les icônes

Nous ne le faisons pas. Je n'ai pas de raisons de ne pas utiliser SVG pour les icônes :

<br/>

.logo {
arrière-plan : url("logo.svg");
}

SVG pour tous Tous les types de résolution ont une bonne évolutivité et prennent en charge tous les navigateurs revenant à IE9. De cette façon, vous pouvez éviter les fichiers .png, .jpg ou .gif.

9. Optimiser le texte affiché

Parfois, les polices ne s'affichent pas de manière optimale sur tous les appareils, alors laissez l'appareil parcourir Pour vous aider :

<br>

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

Remarque : veuillez utiliser optimizeLegibility de manière responsable. De plus, IE/Edge ne prend pas en charge le rendu de texte.

10. Utilisez max-height pour les curseurs CSS purs

Utilisez max-height et le masquage de débordement pour implémenter un curseur CSS uniquement :

<br>

.slider ul {
  max-height: 0;
  overlow: hidden;
}
.slider:hover ul {
  max-height: 1000px;
  transition: .3s ease;
}

11. Hériter de la taille de la boîte

pour laisser la boîte -sizing hérite du HTML :

<br>

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

Cela facilite son utilisation dans des plugins ou d'autres composants qui exploitent d'autres comportements La taille de la boîte a été modifiée.

12. 表格单元格等宽

表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽：

<br>

```
.calendar {
  table-layout: fixed;
}
```

13. 用 Flexbox 摆脱外边距的各种 hack

当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

<br>

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

现在，列表分隔符就会在均匀间隔的位置出现。

14. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

<br>

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

相当方便。

15. 检测鼠标双击

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;
}

16. CSS 写出三角形

<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;
}

17. CSS3 calc() 的使用

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);
}

18. 文本渐变

文本渐变效果很流行，使用 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)));}

19. 禁用鼠标事件

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

<br>

```
.disabled { pointer-events: none; }
```

20. 模糊文本

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

<br>

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

Articles Liés

Voir plus