Un tour d'horizon de 20 astuces CSS avancées

Apprendre à utiliser des techniques CSS avancées pendant le processus de développement est également très bénéfique pour le développement. Dans cet article, nous partagerons avec vous 20 techniques CSS avancées.

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 cool ?

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

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

De cette façon, le code sera être 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 (~) :

.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 :

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 :

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 :

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. Listes séparées par des virgules

Faites en sorte que les éléments de la liste HTML ressemblent à une vraie liste séparée par des virgules :

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

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

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.

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

Il n'y a aucune raison de ne pas utiliser SVG pour les icônes :

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

SVG s'adapte bien à tous les types de résolution et prend en charge tous navigateurs pour revenir à 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 :

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 :

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

11. Hériter du dimensionnement de la boîte

Laissez le dimensionnement de la boîte hériter du HTML :

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

Cela facilitera la tâche dans les plugins ou autres composants qui exploitent d'autres comportements. la taille de la boîte a été modifiée.

12. Les cellules du tableau ont la même largeur

Les tableaux sont difficiles à utiliser, alors assurez-vous d'utiliser table-layout:fixed to garder les cellules de la même largeur :

.calendar {
  table-layout: fixed;
}

13. Utilisez Flexbox pour vous débarrasser de divers hacks dans les marges

Lorsque vous devez utiliser des séparateurs de colonnes, grâce à la propriété space-between de flexbox, vous pouvez vous débarrasser des hacks du nième, premier et dernier enfant :

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

Maintenant, les séparateurs de liste apparaîtront à des positions régulièrement espacées.

14. Utilisez le sélecteur d'attribut pour les liens vides

Affichez le lien lorsque l'élément a n'a pas de valeur de texte mais que l'attribut href a une valeur de texte. lien :

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

Assez pratique.

15. Détecter le double-clic de la souris

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

16. Triangle d'écriture CSS

/* 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. Utilisation de CSS3 calc()

calc() s'utilise comme une fonction et peut définir des valeurs dynamiques​​pour les éléments :

/* 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. Dégradé de texte

L'effet de dégradé de texte est très populaire et peut être facilement obtenu en utilisant 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)));}

19. Désactiver les événements de la souris

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

.disabled { pointer-events: none; }

20. 模糊文本

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

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

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

相关推荐：

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

css的开发小技巧

CSS布局有哪些技巧

几个好用的css函数小技巧

最全的CSS开发常用技巧

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!