Question

我有一个输入框，用户可以在其中设置对象的颜色。我想添加一个用户点击的复选框，上面写着'make 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)

Answer 1

我能够通过一系列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/

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

以编程方式在颜色选择器中向下移动颜色阴影？

1 个答案: