Comment régler progressivement la couleur pour k enfants?

J'ai k enfants de la classe tab_title, je veux peindre progressivement leur fond de color1 à color2. Par exemple: Si k = 3, color1 = rouge (# FF0000), color2 = jaune (# FFFF00) puis l'arrière-plan du 1er élément est rouge (# FF0000), pour le 2ème orange (# FF8000) et pour le 3ème est jaune (# FFFF00); k = 5, color1 = blanc, color2 = noir puis 1er est blanc, 2ème est gris25%, 3ème est gary50%, 4ème est gary75% et 5ème est noir.Comment régler progressivement la couleur pour k enfants?

Je veux que cela fonctionne pour tout k, sans spécifier explicitement le ton pour chaque nth-child(). Toute façon de faire cela purement avec css ou sass? Puisque la classe peut être ajoutée ou supprimée, je préférerais ne pas impliquer de code JS.

J'utilise le code suivant:

@mixin gradbg($n, $c1, $c2){ 
    @for $i from 1 through $n { 
     &:nth-child(#{$i}) { 
      background-color: mix($c1,$c2,((1 - (($i - 1)/($n - 1)))*100%)); 
     } 
    } 
}

puis

li.tab_title{ 
    $from: #097380; 
    $to: #4da759; 
    @include gradbg(3,$from,$to); 
}

la seule chose qui manque est en quelque sorte compter k automatiquement donc je peux utiliser gradbg(k,$from,$to) au lieu de gradbg(3,$from,$to)

Merci une lot,

Guy

Source

2017-01-04 Spätzle

Je l'ai fait pour des valeurs de tableau codées en dur, peut-être cn tordre la logique et faire une fonction récursive pour l'obtenir.

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title></title> 
 

 
     <style> 
 
      li{ 
 
       height: 100px; 
 
       width: 100px; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 

 
     <ul> 
 
      <li class="tab"></li> 
 
      <li class="tab"></li> 
 
      <li class="tab"></li> 
 
     </ul> 
 

 
     <script> 
 
     var k = ["#FF0000", "#FFFF00"]; 
 
     var hex = []; 
 
     var intermeidate_color = ""; 
 

 
     function hexToRgb(hex) { 
 
      var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 
 
      return result ? { 
 
       r: parseInt(result[1], 16), 
 
       g: parseInt(result[2], 16), 
 
       b: parseInt(result[3], 16) 
 
      } : null; 
 
     } 
 

 
     k.map(function(item, index){ 
 
      hex.push({ 
 
       r : hexToRgb(item).r, 
 
       g : hexToRgb(item).g, 
 
       b : hexToRgb(item).b 
 
      }) 
 
     }); 
 

 
     console.log(hex); 
 

 
     for (var i = 0; i < hex.length - 1; i++) { 
 
      intermeidate_color = { 
 
       r : parseInt((hex[i].r + hex[i+1].r)/2), 
 
       g : parseInt((hex[i].g + hex[i+1].g)/2), 
 
       b : parseInt((hex[i].b + hex[i+1].b)/2) 
 
      } 
 
     } 
 

 
     function rgbToHex(r, g, b) { 
 
      return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); 
 
     } 
 

 

 
     k.splice(1, 0, rgbToHex(intermeidate_color.r, intermeidate_color.g, intermeidate_color.b)); 
 
       
 

 
     var tabs = document.getElementsByClassName('tab'); 
 
     for (var i=0; i < tabs.length; i++) { 
 
      tabs[i].style.backgroundColor = k[i]; 
 
     } 
 
     //document.body.style.backgroundColor = rgbToHex(intermeidate_color.r, intermeidate_color.g, intermeidate_color.b); 
 
     </script> 
 
    </body> 
 
</html>

Source

2017-01-04 07:06:54

comme je le disais, je ne veux pas une solution JS (que je réussi à me mettre en œuvre). css s'il vous plaît. –

Pouvez-vous jouer du violon avec ce que vous avez? Je peux vous aider plus. –

@ Spätzle Je pourrais le faire, son utilisation de javascript à nouveau. Postez votre lien de violon ici, je peux le modifier. –

Comment régler progressivement la couleur pour k enfants?

Répondre

Questions connexes