12 astuces CSS à mettre en favoris ! !

Cet article partagera avec vous 12 astuces CSS qui valent la peine d'être collectées. Vous pouvez essayer de vous en souvenir, car elles peuvent sauver des vies dans les moments critiques ! J'espère que cela aidera tout le monde !

1. Courbe du texte autour d'une image flottante à l'aide de Shape-outside

C'est une propriété CSS qui permet de définir une forme. Cela permet également de définir les zones où le texte circule. Code CSS :

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}

2. Combinaison magique

Cette petite combinaison peut en fait empêcher la plupart des erreurs de mise en page que vous rencontrez en HTML. Nous ne voulons vraiment pas que les curseurs horizontaux ou les éléments positionnés de manière absolue fassent ce qu'ils veulent, et nous ne voulons pas non plus de marges aléatoires et de remplissage partout. Voici donc votre combinaison magique.

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}

Parfois "display:block" n'est pas utile, mais dans la plupart des cas, vous traiterez <a> 和 <span> comme un bloc comme n'importe quel autre bloc. Donc, dans la plupart des cas, cela vous aidera réellement !

3. Diviser HTML et CSS

Il s'agit plutôt d'une technique de type « workflow ». Je vous recommande de créer différents fichiers CSS lors du développement et de les fusionner uniquement à la fin. Par exemple, un pour ordinateur, un pour mobile, etc. Enfin, vous devez les fusionner car cela contribuera à minimiser le nombre de requêtes HTTP vers votre site Web.

Le même principe s'applique au HTML. Si vous ne développez pas dans un environnement SPA tel que Gatsby, PHP peut être utilisé pour inclure des extraits de code HTML. Par exemple, vous souhaitez conserver un dossier "/modules" qui contiendra la barre de navigation, le pied de page, etc. dans des fichiers séparés. Ainsi, si des modifications doivent être apportées, vous n'êtes pas obligé de les modifier sur chaque page. Plus il y a de modularité, meilleurs sont les résultats.

4. ::Lettre initiale

Il applique le style à la première lettre de l'élément de niveau bloc. Par conséquent, nous pouvons apporter des effets que nous connaissons bien dans les magazines imprimés ou papier. Sans ce pseudo-élément, il faudrait créer de nombreuses travées pour obtenir cet effet. Par exemple :

Comment cela se fait-il ? Le code est le suivant :

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}

5. Quatre propriétés principales

L'animation CSS fournit un moyen relativement simple de passer en douceur entre un grand nombre de propriétés. Une bonne interface animée repose sur une expérience fluide et fluide. Pour maintenir de bonnes performances dans notre chronologie d'animation, nous devons limiter nos propriétés d'animation aux quatre cœurs suivants :

• scale - transform:scale(2)
• rotate - transform:rotate(180deg )
• position – transformer : traduire Ou l'animation de l'ombre de la boîte affecte la méthode de dessin du navigateur. Tous ces éléments réduiront considérablement votre FPS (FramesPerSecond). Vous pouvez utiliser ces propriétés pour produire des effets intéressants, mais elles doivent être utilisées avec prudence pour maintenir de bonnes performances.
6. Utilisez des variables pour rester cohérent
• Un bon moyen de rester cohérent est d'utiliser des variables CSS ou des variables de préprocesseur pour prédéfinir les timings d'animation.

  :root{ timing-base: 1000;}

Définir une animation de base ou une durée de transition sans définir d'unité nous donne la flexibilité d'appeler cette durée dans la fonction calc(). Cette durée peut différer de notre variable CSS de base, mais il s'agira toujours d'une simple modification de ce nombre et maintiendra toujours une expérience cohérente.

7. Conic Gradient

Vous êtes-vous déjà demandé si vous pouviez créer un diagramme circulaire en utilisant uniquement du CSS ? La bonne nouvelle est que vous le pouvez réellement ! Cela peut être fait en utilisant la fonction conic-gradient. Cette fonction crée une image composée d'un dégradé avec une transition de couleur définie tournant autour d'un point central. Vous pouvez le faire en utilisant la ligne de code suivante :

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}

8. Changer la couleur de sélection du texte

Pour changer la couleur de la sélection du texte, nous utilisons

::selection

. Il s'agit d'un pseudo-élément qui est remplacé au niveau du navigateur pour remplacer la couleur de surbrillance du texte par une couleur de votre choix. Vous pouvez voir l'effet en sélectionnant le contenu avec votre curseur.

::selection {
     background-color: #f3b70f;
 }

9. Effets de survol

Les effets de survol sont généralement utilisés sur les boutons, les liens texte, les sections de bloc du site, les icônes, etc. Si vous souhaitez changer la couleur lorsque quelqu'un la survole, utilisez simplement le même CSS mais ajoutez-y

:hover

et changez le style. Voici comment procéder ;

.m h2{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h2:hover{ 
    color:#f00; 
}

Cela changera la couleur de votre balise h2 du noir au rouge lorsque quelqu'un la survolera. C'est utile car vous n'avez pas besoin de déclarer à nouveau la taille ou l'épaisseur de la police si vous ne souhaitez pas les modifier. Cela modifiera uniquement les propriétés que vous spécifiez.

10. Drop Shadow

Ajoutez cet attribut pour apporter un meilleur effet d'ombre aux images transparentes. Vous pouvez le faire en utilisant les lignes de code données.

.img-wrapper img{
          width: 100% ;
          height: 100% ;
          object-fit: cover ;
          filter: drop-shadow(30px 10px 4px #757575);
 }

11. 使用放置项居中 Div

居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素，然后使用如下所示的 place-items 属性。

main{
     width: 100% ;
      height: 80vh ;
      display: grid ;
      place-items: center center;
}

12. 使用 Flexbox 居中 Div

我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例：

<div class="center h-48">
  <div></div>
</div>

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

首先，我们需要确保父容器持有圆，即 flex-container。在它里面，我们有一个简单的 div 来制作我们的圆圈。我们需要使用以下与 flexbox 相关的重要属性：

• display: flex; 这确保父容器具有 flexbox 布局。
• align-items: center; 这可确保 flex 子项与横轴的中心对齐。
• justify-content: center; 这确保 flex 子项与主轴的中心对齐。

之后，我们就有了常用的圆形 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!