以編程方式在顏色選擇器中向下移動顏色陰影？

我有一個輸入框，用戶可以在其中設置對象的顏色。我想添加一個複選框，用戶單擊它說'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)

來源

2013-07-28 EHerman

你有沒有考慮過使用sass？ http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#lighten-instance_method –

Mabe認爲使用庫... Tiny Color很棒... https://github.com/ bgrins/TinyColor – PAEz

即時通訊使用jscolor的顏色選擇器，我看看微小的顏色 – EHerman

我能夠解決這個問題，我用網上的一串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-29 17:16:19 EHerman

以編程方式在顏色選擇器中向下移動顏色陰影？

回答

相關問題