7 astuces et propriétés CSS à connaître en 2022

Changer la couleur des checkbox et boutons radio
Changer la couleur d'un texte en placeholder
Sélectionner l'intégralité d'un texte
Centrer une liste à puces
Créer des flèches en CSS
Ajouter une icône sur un bouton
Ajouter une ombre sur une image transparente

1. Changer la couleur des checkbox et boutons radio

En utilisant la propriété accent-color, il est possible de changer la couleur des checkbox et des boutons radio.

1-1

Le code :

<head>
   <style>
      input[type=checkbox], input[type=radio] {
         accent-color: orange;
      }
   </style>
</head>
<body>
   <input type="checkbox" id="choix1" name="choix" value="choix1" checked>
   <label for="choix1">Choix 1</label><br>
   <input type="checkbox" id="choix2" name="choix" value="choix2" checked>
   <label for="choix2">Choix 2</label>

   <br><br>

   <input type="radio" id="selection1" name="selection" value="selection1">
   <label for="selection1">Sélection 1</label><br>
   <input type="radio" id="selection2" name="selection" value="selection2">
   <label for="selection2">Sélection 2</label>
</body>

2. Changer la couleur d'un texte en placeholder

Il est possible de sélectionner le texte du placeholder à l’aide du selecteur ::placeholder.

2-1

Le code :

<head>
    <style>
        ::placeholder{
            color: green;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="Placeholder vert">
</body>

3. Sélectionner l'intégralité d'un texte

Afin d'améliorer l'expérience utilisateur, parfois il peut être intéressant d'offrir la possibilité au visiteur de sélectionner l'intégralité d'un texte avec un seul clic (sans balayement).

Pour cela, nous pouvons utiliser la propriété CSS user-select.

3-1

Le code :

<head>
    <style>
        .numero{
            user-select: all;
        }
    </style>
</head>
<body>
    <div>Numéro de téléphone : <span class='numero'>000 00 00 00</span></div>
</body>

4. Centrer une liste à puces

Lorsque l’on désire centrer une liste à puces au milieu de la page, le résultat obtenu est disgracieux. En effet, non seulement la liste est centrée mais également les différents éléments de la liste.

4-1

Le code :

<head>
    <style>
        ul{
            text-align: center
        }
    </style>
</head>
<body>
    <ul>
        <li>Camion</li>
        <li>Voiture de sport</li>
        <li>Moto</li>
    </ul>
</body>
</html>

Pour centrer la liste mais pas les éléments de la liste, il suffit de rajouter un container et un peu de CSS.

4.1-1

Et voici le code pour arriver à ce résultat :

<head>
    <style>
        .container{
            text-align: center;
        }
        ul{
            text-align: left;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>Camion</li>
            <li>Voiture de sport</li>
            <li>Moto</li>
        </ul>
    </div>
</body>

5. Créer des flèches en CSS

Il est possible de créer des flèches en pur CSS. Pour cela, il suffit de jouer avec le border ainsi qu’avec la propriété transform :rotate().

5-1

Le code :

<head>
    <style>
        .fleche{
          border: solid black;
          border-width: 0 2px 2px 0;
          display: inline-block;
          padding: 4px;
        }
        
        .droite{
          transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
        }
        
        .gauche{
          transform: rotate(135deg);
          -webkit-transform: rotate(135deg);
        }
        
        .haut{
          transform: rotate(-135deg);
          -webkit-transform: rotate(-135deg);
        }
        
        .bas{
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <p>Flèche droite : <i class="fleche droite"></i></p>
    <p>Flèche gauche : <i class="fleche gauche"></i></p>
    <p>Flèche haut : <i class="fleche haut"></i></p>
    <p>Flèche bas : <i class="fleche bas"></i></p> 
</body>

6. Ajouter une icône sur un bouton

En utilisant une librairie d'icônes, comme Font Awesome, vous pouvez ajouter des icônes très facilement. Il suffit de charger la librairie via son CDN par exemple, puis d'utiliser la balise <i> en spécifiant les bonnes classes (accéder à la liste des icônes).

6-1

Le code :

<head>
    <link 
        rel="stylesheet" 
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
    >
    <style>
        .btn {
          background-color: red;
          border: none;
          color: white;
          padding: 12px 16px;
          font-size: 16px;
          cursor: pointer;
        }
    </style>
</head>
<body>
    <button class="btn"><i class="fa fa-home"></i> Home</button>
    <button class="btn">Close <i class="fa fa-close"></i></button>
</body>

7. Ajouter une ombre sur une image transparente

Lorsque l’on utilise la propriété box-shadow, cela ajoute une ombre autour du cadrant de l’image et non pas à l’intérieur de celle-ci.

8.1-1

Le code :

<head>
    <style>
        img{
          box-shadow: 4px 4px 8px gray;
          width: 200px;
        }
    </style>
</head>
<body>
    <img src="https://karac.ch/icon/karac-blue-logo.svg">
</body>

Pour ajouter l’ombre directement au sein de l’image, nous pouvons utiliser le filtre drop-shadow (et utiliser une image qui contient de la transparence (.svg ou .png).

8.2-1

Le code :

<head>
    <style>
        img{
          filter: drop-shadow(2px 2px 8px #C0C0C0);
          width: 200px;
        }
    </style>
</head>
<body>
    <img src="https://karac.ch/icon/karac-blue-logo.svg">
</body>

Catégories :

Tech web

Tags :

CSS HTML

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !