Un tour d'horizon de 20 astuces CSS avancées-tutoriel CSS-php.cn

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

小云云

Libérer： 2017-12-05 13:29:16

original

1846 Les gens l'ont consulté

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

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

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

Copier après la connexion

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

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 :

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 :

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 :

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. 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: ",";
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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 :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

17. Utilisation de CSS3 calc()

calc() s'utilise comme une fonction et peut définir des valeurs dynamiquespour 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);
}

Copier après la connexion

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

Copier après la connexion

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

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

.disabled { pointer-events: none; }

Copier après la connexion

20. 模糊文本

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

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

Copier après la connexion

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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