Les astuces CSS vous épateront

CSS (Cascading style sheet) est l'une des technologies les plus populaires en matière de conception Web, permettant aux développeurs de créer des conceptions visuelles et réactives. En tant que développeur Web, la maîtrise du CSS est cruciale pour donner vie à votre vision du design et garantir une bonne expérience utilisateur sur tous les appareils. Voici quelques conseils que vous ne connaissez peut-être pas en CSS :

1. Neumorphsime :

Neumorphsime, appelé soft UI design, est une tendance de design populaire combinant skeuomorphisme et design plat. ce style utilise des ombres et des reflets pour créer un aspect lisse. voici comment ça marche :

Tout d'abord, on crée un fond subtil : pour commencer avec Neumotphsime, choisissez une couleur de fond douce comme le gris clair,

body {
  background-color: #eee;
  display: grid;
  place-content: center;
  height: 100vh;
}

puis on crée un élément avec ces styles

.element {
  height: 100px;
  width: 100px;
  transition: all 0.2s linear;
  border-radius: 16px;
}

Enfin, on ajoute une ombre de boîte à l'élément lors du survol

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1), -10px -10px 10px white;
}

on obtient donc ce joli look

et vous pouvez faire ça aussi

ajoutez simplement un encart à l'ombre de la boîte comme ceci

.element:hover {
  box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.1) inset, -10px -10px 10px white inset;
}

2. Min() & Max() et clamp() :

ces outils rendent les sites Web et les applications plus dynamiques et réactifs. vous pouvez utiliser ces fonctions pour contrôler le dimensionnement et le redimensionnement des éléments. et créer une typographie flexible ici comment :

la fonction min() vous permet de définir la plus petite valeur d'une liste ici comment

avant

.container {
  width:800px;
  max-width:90%;
}

après

.container{
  width: min(800px,90%);
}

la fonction max() fonctionne de la même manière que la fonction min() mais prend la plus grande valeur d'une liste, voici comment :

.container{
  width: max(800px,90%);
}

Parfois, vous définissez la largeur, la largeur minimale et maximale dans un conteneur, il existe une autre fonction nommée clamp(), voici comment cela fonctionne

avant

.container {
  width:50vw;
  min-width:400px;
  max-width:800px;
}

Après

.container {
  width: clamp(400px,50vw,800px);
}

3. Le sélecteur :Has() et :Not() :

le sélecteur :not() représente les éléments qui ne correspondent pas à une liste de sélecteurs

.container:not(:first-child) {
  background-color: blue;
}

le sélecteur :has() représente un élément si l'un des sélecteurs relatifs transmis en argument correspond

.container:has(svg) {
  padding: 20px;
}

4. Dégradé de texte :

pour cette astuce, on ne peut pas ajouter un dégradé à la couleur du texte directement comme ça

.text{
  color: linear-gradient(to right, red,blue);
}

ce que nous faisons à la place

.text{
  background: linear-gradient(to right, red,blue);
  background-clip:text;
  color:transparent;
}

et voilà, nous obtenons cet effet génial

Conclusion :

En maîtrisant l'une de ces techniques CSS, vous allez élever vos compétences en conception de sites Web vers de nouveaux sommets. avec seulement de petits ajustements avec ces techniques, vous pouvez obtenir des résultats visuellement époustouflants et rendre votre conception plus belle et plus conviviale.

vous pouvez en savoir plus sur : https://designobit.com/

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!