LESS - Fonction de lumière douce de mélange de couleurs

La description

La lumière douce fonctionne de la même manière que la superposition, mais elle n'utilise qu'une partie de la couleur, ce qui met en évidence l'autre couleur.

Paramètres

  • color1- Un objet de couleur pour en éclairer un autre.

  • color2- Un objet de couleur qui doit être légèrement éclairci .

Retour

Couleur

Exemple

L'exemple suivant illustre l'utilisation de la fonction softlight dans le fichier LESS -

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

   <body>
      <h2>Softlight Function</h2>
      <div class = "color1">
         <p>(color1) <br> #ff6600</p>
      </div><br>
      
      <div class = "color2">
         <p>(color2) <br> #0000ff</p>
      </div><br>
      
      <div class = "res">
         <p>(result) <br> #ff2900</p>
      </div>
   </body>
</html>

Ensuite, créez le fichier style.less .

sans style

.color1 {
   width: 100px;
   height: 100px;
   background-color: #ff6600;
}

.color2 {
   width: 100px;
   height: 100px;
   background-color: #0000ff;
}

.res {
   width: 100px;
   height: 100px;
   background-color: softlight(#ff6600, #0000ff);
}

p {
   padding: 30px 0px 0px 25px;
}

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

.color1 {
   width: 100px;
   height: 100px;
   background-color: #ff6600;
}

.color2 {
   width: 100px;
   height: 100px;
   background-color: #0000ff;
}

.result {
   width: 100px;
   height: 100px;
   background-color: #ff2900;
}

p {
   padding: 30px 0px 0px 25px;
}

Production

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

  • Enregistrer le code ci-dessus dans color_blending_softlight.html fichier.

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