Changer dynamiquement la couleur à plus clair ou plus foncé par le pourcentage CSS (Javascript)

vous pouvez maintenant faire cela avec des filtres CSS. La prise en charge est iffy navigateurs croisés, mais comme la spécification continue à être mis en œuvre et nettoyé, cela va être vraiment pratique.

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

<button class="button">Foo lorem ipsum</button>

voici quelques lectures sur les différents filtres que vous pouvez utiliser: http://code.tutsplus.com/tutorials/say-hello-to-webkit-filters--net-23318

mise à Jour

Cela semble être de plus en plus upvotes que les filtres font leur chemin dans le courant principal. Voici la compatibilité actuelle: http://caniuse.com/#feat=css-filters

il y a" opacité" qui fera briller le fond à travers:

opacity: 0.5;

mais je ne suis pas sûr que ce soit ce que vous voulez dire. Définir "réduire la couleur": rendre transparent? Ou ajouter le blanc?

couleurs HSL fournir une réponse, une valeur de couleur HSL est spécifiée avec: hsl(teinte [0,255], % de saturation, %de légèreté).

HSL est pris en charge dans IE9+, Firefox, Chrome, Safari, et dans Opera 10 +

a
{
color:hsl(240,65%,50%);
}
a.lighter 
{
color:hsl(240,65%,75%);
}

dans LESS, vous utiliseriez les variables suivantes:

@primary-color: #999;
@primary-color-lighter: lighten(@primary-color, 20%);

cela prendrait la première variable et l'allégerait de 20% (ou tout autre pourcentage). Dans cet exemple, vous finiriez avec votre couleur plus claire étant: #ccc

si vous voulez une couleur plus foncée, vous pouvez utiliser rgba noir avec une faible opacité:

rgba(0,0,0,0.3)

pour un usage plus léger blanc:

rgba(255,255,255,0.3).

autant que je sache, il n'y a aucun moyen que vous puissiez faire ça dans CSS.

mais je pense qu'une petite logique côté serveur pourrait facilement faire ce que vous suggérez. Les feuilles de style CSS sont normalement des actifs statiques, mais il n'y a aucune raison pour qu'elles ne puissent pas être générées dynamiquement par du code côté serveur. Votre script côté serveur serait:

1. Vérifiez un paramètre D'URL pour déterminer l'utilisateur et donc la couleur choisie par l'utilisateur. Utilisez un paramètre URL plutôt qu'une session variable de sorte que vous pouvez toujours mettre en cache le CSS.
2. décomposer la couleur en ses composantes rouge, verte et bleue
3. incrémente chacune des trois composantes d'un montant déterminé. Expérience afin d'obtenir les résultats que vous êtes après.
4. Générer le CSS, intégrant la nouvelle couleur

les liens à cette page génératrice CSS ressembleraient à quelque chose comme:

<link rel="stylesheet" href="http://yoursite.com/custom.ashx?user=1231">

Si vous n'utilisez pas le. extension css assurez-vous de définir le type MIME correctement de sorte que le navigateur sait interpréter le fichier CSS.

(notez que pour rendre les couleurs plus claires, vous devez lever chacune des valeurs RGB)

si vous décidez d'utiliser http://compass-style.org / , un cadre de css basé sur sass, il fournit des fonctions de Sass très utiles darken() et lighten() pour générer dynamiquement css. c'est très propre:

@import compass/utilities

$link_color: #bb8f8f
a
  color: $link_color
a:visited
  color: $link_color
a:hover
  color: darken($link_color,10)

génère

a {
  color: #bb8f8f;
}

a:visited {
  color: #bb8f8f;
}

a:hover {
  color: #a86f6f;
}

vous pouvez utiliser un peu de javascript pour calculer la couleur plus foncée et plus claire en utilisant le rgb().

Violon : Pas vraiment belle, mais c'est juste pour l'illustration.

ce qu'il fait essentiellement est fixe une couleur et sélectionne 20 couleurs avec la même quantité (par rapport à l'autre) de rgb seulement avec 10 à part.

for (var i=-10; i < $('.row:eq(0) .block').length/2 ; i++) {
 var r = 91;
 var g = 192;
 var b = 222;
 $('.row:eq(1) .block:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+   (i*10))      );
};

une réponse simple est d'utiliser un PNG blanc transparent à 50% sur la couleur:

div {
    background-color:red;
}

div:hover {
    background-image:url('lighten.png');
}

où lighten.png est un PNG de remplissage blanc avec une transparence de 50%.

vous pouvez utiliser RGBa ('a' étant alpha transparency), mais il n'est pas encore largement soutenu. sera être, cependant, de sorte que vous pouvez l'utiliser dès maintenant et ajouter une solution de repli:

a:link { 
    color: rgb(0,0,255); 
    }
a:link.lighter {
    color: rgb(128,128,255); /* This gets applied only in browsers that don't apply the rgba line */
    }
a:link.lighter { /* This comes after the previous line, so has priority in supporting browsers */
    color: rgba(0,0,255,0.5); /* last value is transparency */
    }

Pas directement, non. Mais vous pouvez utiliser un site comme colorschemedesigner.com , qui vous donnera votre couleur de base, puis vous donner l'hexagone et rvb codes pour les différentes gammes de votre couleur de base.

une fois que j'ai trouvé mes schémas de couleurs pour mon site, j'ai mis les codes hexadécimaux pour les couleurs et les nommer dans une section de commentaire en haut de ma feuille de style.

D'autres générateurs de couleurs incluent:

• http://www.colorschemer.com/online.html
• http://colorschemegenerator.com/
• http://www.cssjuice.com/25-popular-color-scheme-and-palette-generators/

, Essayez:

a {
  color: hsl(240, 100%, 50%);
}

a:hover {
  color: hsl(240, 100%, 70%);
}

je sais qu'il est tard mais, vous pourriez utiliser un wrapper à vos boutons et changer un RGBA fonction opacité niveau, comme indiqué dans d'autres réponses, mais sans exemple explicite.

voici un stylo:

https://codepen.io/aronkof/pen/WzGmjR

#wrapper {
  width: 50vw;
  height: 50vh;
  background-color: #AAA;
  margin: 20px auto;
  border-radius: 5px;
  display: grid;
  place-items: center;
} 

.btn-wrap {
  background-color: #000;
  display: inline-block;
}

button {
  transition: all 0.6s linear;
  background-color: rgba(0, 255, 0, 1);
  border: none;
  outline: none;
  color: #fff;
  padding: 50px;
  font-weight: 700;
  font-size: 2em;
}

button:hover {
  background-color: rgba(0, 255, 0, .5);
}

<div id="wrapper">
  <div class="btn-wrap">
    <button class="btn">HEY!</buutton>
  </div>
</div>

Voir mon commentaire sur la réponse de Ctford.

je pense que le moyen facile d'alléger une couleur serait de prendre chacun des composants RGB, ajouter à 0xff et diviser par 2. Si cela ne donne pas les résultats exacts que vous voulez, prenez 0xff moins la valeur courante multiplié par une constante et puis ajouter de nouveau à la valeur courante. Par exemple, si vous voulez déplacer 1/3 du chemin vers le blanc, prenez (0xFF - current)/3+current.

il faudrait jouer avec pour voir ce que les résultats que vous avez obtenu. Je m'inquiéterais qu'avec cette formule simple a, un facteur assez grand pour faire pâlir les couleurs foncées puisse faire changer les couleurs claires de blanc, alors qu'un facteur assez petit pour rendre les couleurs claires seulement un peu plus claires pourrait rendre les couleurs foncées pas assez claires.

pourtant, je pense qu'aller par une fraction de la distance au blanc est plus prometteur qu'un nombre fixe d'étapes.

vous pouvez utiliser une bibliothèque JavaScript telle que JXtension qui donne à l'utilisateur la possibilité de rendre une couleur plus claire ou plus sombre. Si vous souhaitez trouver de la documentation pour cette toute nouvelle bibliothèque, Cliquez ici . Vous pouvez également utiliser JXtension pour combiner une couleur avec une autre.

it looks like jPaq ( http://jpaq.org / ) remplace JXtension. L'avantage d'utiliser jPaq est que vous ne pouvez télécharger que ce dont vous avez besoin au lieu de la bibliothèque JavaScript complète. Voici un lien à la page de téléchargement pour juste la classe de couleur: http://jpaq.org/download/1.0.0.1008 .

j'ai trouvé une classe PHP qui me permet de faire ce côté serveur. Je sors juste un style de couleur CSS en ligne pour tout ce que je dois être plus clair/sombre. Fonctionne très bien.

http://www.barelyfitz.com/projects/csscolor /

_{(notez que la classe utilise la poire pour lancer des erreurs, mais je ne voulais pas inclure la poire juste pour modifier les couleurs, donc j'ai juste enlevé toutes les références de poire)}

I transformé en une classe statique avec des méthodes statiques de sorte que je peux appeler "alléger" & "assombrir" fonctions directement sans créer un nouvel objet.

exemple d'utilisation:

$original_color = 'E58D8D';  
$lighter_color = Css::lighten($original_color, .7);  
$darker_color = Css::darken($original_color, .7);

j'ai écrit un plugin pour jquery qui édite ce même numéro. - Je prendre de la couleur comme une propriété, ou de l'ensemble de la couleur de la propriété css qu'ils veulent, et le lancer à travers certains calculs. Hex à RGB, puis multiplier le pourcentage d'offset, puis retourner une nouvelle valeur. Laissez-moi savoir si vous voulez un exemple.

rassembler tout, une solution de table fait purement avec DIV et CSS, essayer;) le navigateur devrait prendre en charge les couleurs RGBA cependant....

<head>
<style>
    .colored-div-table {
        display: table;
        table-layout: fixed;
    }
    .colored-div-table #col {
        display: table-column;
    }
    .colored-div-table #col:nth-child(odd) {
    }
    .colored-div-table #col:nth-child(even) {
    }
    .colored-div-table #col:nth-child(1){
        background-color: lightblue;
        width: 50px !important;
    }
    .colored-div-table #col:nth-child(2){
        background-color: lightyellow;
        width: 200px !important;
    }
    .colored-div-table #col:nth-child(3){
        background-color: lightcyan;
        width: 50px !important;
    }
    .colored-div-table #row {
        display: table-row;
    }
    .colored-div-table #row div {
        display: table-cell;
    }
    .colored-div-table #row div:nth-child(1) {

    }
    .colored-div-table #row div:nth-child(2) {
    }
    .colored-div-table #row div:nth-child(3) {
    }
    .colored-div-table #row:nth-child(odd) {
        background-color: rgba(0,0,0,0.1)
    }
    .colored-div-table #row:nth-child(even) {
    }
</style>
</head>
<body>

<div id="divtable" class="colored-div-table">
    <div id="col"></div>
    <div id="col"></div>
    <div id="col"></div>  

    <div id="row">
        <div>First Line</div><div>FL C2</div><div>FL C3></div>
    </div>

    <div id="row">
        <div>Second Line</div><div>SL C2</div><div>SL C3></div>
    </div>

    <div id="row">
        <div>Third Line</div><div>TL C2</div><div>TL C3></div>
    </div>

    <div id="row">
        <div>Forth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Fifth Line</div><div>FL C2</div><div>FL C3></div>
    </div>
    <div id="row">
        <div>Sixth Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Seventh Line</div><div>SL C2</div><div>SL C3></div>
    </div>
    <div id="row">
        <div>Eight Line</div><div>EL C2</div><div>EL C3></div>
    </div>
    <div id="row">
        <div>Nineth Line</div><div>NL C2</div><div>NL C3></div>
    </div>
    <div id="row">
        <div>Tenth Line</div><div>TL C2</div><div>TL C3></div>
    </div>

</div>
</body>

pour css nommé couleur "bleu", il y a "lightblue "

Pour "vert", il y a "Vert Clair "

pour "grey", il y a "lightgrey "

pour 'yellow', il y a' lightyellow '

essayez de parcourir ce css nommé liste des couleurs pour plus: http://www.w3schools.com/CSS/css_colornames.asp