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, nous créons 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 nous créons un élément avec ces styles

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

Enfin, nous ajoutons 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;
}

donc nous obtenons ce joli look

et vous pouvez le faire 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 plus 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. Les sélecteurs :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 tant qu'argument correspond

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

4. Dégradé de texte :

pour cette astuce, nous ne pouvons pas ajouter un dégradé à la couleur du texte directement comme ceci

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