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

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>

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

   Copier après la connexion

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

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

<br/>

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

   Copier après la connexion

puis supprimez le dernier one Elements

<br/>

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

   Copier après la connexion

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

<br/>

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

   Copier après la connexion

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/>

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

   Copier après la connexion

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/>

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

   Copier après la connexion

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/>

1. body {
     line-height: 1;
   }

   Copier après la connexion

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/>

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

   Copier après la connexion

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/>

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

   Copier après la connexion

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/>

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

   Copier après la connexion

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/>

1. .logo {

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

3. }

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/>

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

   Copier après la connexion

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/>

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

   Copier après la connexion

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

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

<br/>

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

   Copier après la connexion

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/>

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

   Copier après la connexion

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

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

<br/>

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

   Copier après la connexion

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

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

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

<br/>

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

   Copier après la connexion

相当方便。

15. 检测鼠标双击

HTML：

<br/>

1. <p class="test3">
     <span><input type="text" value=" " readonly="true" />
     <a href="http://renpingjun.com">Double click me</a></span>
   </p>

   Copier après la connexion

CSS：

<br/>

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

   Copier après la connexion

16. CSS 写出三角形

<br/>

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

   Copier après la connexion

17. CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

<br/>

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

   Copier après la connexion

18. 文本渐变

文本渐变效果很流行，使用 CSS3 能够很简单就实现：

<br/>

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

   Copier après la connexion

19. 禁用鼠标事件

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

<br/>

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

   Copier après la connexion

20. 模糊文本

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

<br/>

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

   Copier après la connexion

相关推荐：

CSS高级技巧

常用的CSS高级技巧_html/css_WEB-ITnose

你需要知道的三个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!