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 3499910bf9dac5ae3c52d5ede7383485 和 45a2772a6b6107b401db3c9b82c049c2 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

. 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

et changez le style. Voici comment procéder ;

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

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

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

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

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!