0

我有一个输入框，用户可以在其中设置对象的颜色。我想添加一个用户单击的复选框，上面写着“制作 3D”，它为对象添加了文本阴影效果，使其具有 3D 外观。3D 效果需要较浅的基色阴影才能使其看起来正确。如果我想使用基色作为开始，并以编程方式为第一个文本阴影移动一个较浅的阴影，为第二个阴影移动两个较浅的阴影等，这可能吗？

他们可以输入他们想要的任何颜色，但是文本阴影应该使用该输入并一次移动一到两个浅色。

HTML

<p>Object Color:<input type="text" class="object_color" value="FF8000" id="object_color"></p>

要添加到对象的 CSS

 text-shadow: 0 1px 0 #one-shade-lighter-than-FF8000,
               0 2px 0 #one-shade-lighter-than-FF8000,
               0 3px 0 #two-shades-lighter-than-FF8000,
               0 4px 0 #two-shades-lighter-than-FF8000,
               0 5px 0 #three-shades-lighter-than-FF8000,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15)

我想最终我们可以相互减去颜色以转移到一种新颜色，例如

var textShadow = rgb(156, 87, 135) - rgb(2, 4, 18)
4

1 回答 1

0

我能够使用我在网上遇到的一段 javascript 代码来解决这个问题。

该脚本接受一个十六进制值，将其转换为 RGB，然后根据您的规范使颜色变暗或变亮，并返回变亮或变暗的颜色。它对我需要它做的事情很有魅力。

function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
    hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
    c = parseInt(hex.substr(i*2,2), 16);
    c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
    rgb += ("00"+c).substr(c.length);
}
return rgb;

}

返回

ColorLuminance("#69c", 0);      // returns "#6699cc"
ColorLuminance("6699CC", 0.2);  // "#7ab8f5" - 20% lighter
ColorLuminance("69C", -0.5);    // "#334d66" - 50% darker
ColorLuminance("000", 1);       // "#000000" - true black cannot be made lighter!`

我从网站上得到了它：http ://www.sitepoint.com/javascript-generate-lighter-darker-color/

对于任何可能需要它作为前进参考的人。

于 2013-07-29T17:16:19.450 回答