LESS - Ombre

La description

Il est utilisé pour mélanger la couleur avec le noir lorsque vous diminuez la proportion de la couleur. Il a les paramètres suivants -

  • color - Il représente un objet de couleur.

  • weight - C'est un paramètre facultatif qui spécifie le poids de l'élément en fournissant le point d'équilibre en pourcentage entre la couleur et le noir.

Exemple

L'exemple suivant illustre l'utilisation de l'opération de couleur de nuance dans le fichier LESS -

<html>
   <head>
      <title>Shade</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css"/>
   </head>

   <body>
      <h2>Example of Shade Color Operation</h2>
      <div class = "myclass1">
         <p>color :<br>rgba(66, 97, 5, 0.5)</p>
      </div><br>

      <div class = "myclass2">
         <p>result :<br>rgba(17, 24, 1, 0.75)</p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.myclass1 {
   height:100px;
   width:100px;
   padding: 30px 0px 0px 25px;
   background-color: rgba(66, 97, 5, 0.5);
   color:white;
}

.myclass2 {
   height:100px;
   width:100px;
   padding: 30px 0px 0px 25px;
   background-color: shade(rgba(66, 97, 5, 0.5),50%);
   color:white;
}

Vous pouvez compiler le style.less en style.css en utilisant la commande suivante -

lessc style.less style.css

Exécutez la commande ci-dessus; il créera automatiquement le fichier style.css avec le code suivant -

style.css

.myclass1 {
   height: 100px;
   width: 100px;
   padding: 30px 0px 0px 25px;
   background-color: rgba(66, 97, 5, 0.5);
   color: white;
}

.myclass2 {
   height: 100px;
   width: 100px;
   padding: 30px 0px 0px 25px;
   background-color: rgba(17, 24, 1, 0.75);
  color: white;
}

Production

Suivez ces étapes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus dans le shade.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.