Генерируйте более легкий/более темный цвет css использование JavaScript
Как dj_segfault указывает, оболочка может сделать большую часть из этого для Вас. Похож необходимо будет возвратиться к чему-то внешнему для печатания строчными литерами строки, все же. Для этого у Вас есть много опций, как остроты жемчуга выше, и т.д., но я думаю, что TR является, вероятно, самым простым.
# first, strip underscores
CLEAN=${STRING//_/}
# next, replace spaces with underscores
CLEAN=${CLEAN// /_}
# now, clean out anything that's not alphanumeric or an underscore
CLEAN=${CLEAN//[^a-zA-Z0-9_]/}
# finally, lowercase with TR
CLEAN=`echo -n $CLEAN | tr A-Z a-z`
порядок здесь несколько важен. Мы хотим избавиться от подчеркиваний плюс пробелы замены с подчеркиваниями, таким образом, мы, несомненно, должны будем разделить подчеркивания сначала. Путем ожидания для передачи вещей TR до конца мы знаем, что имеем только алфавитно-цифровой и подчеркивания, и мы можем быть уверены, что у нас нет пробелов, таким образом, мы не должны волноваться о специальных символах, интерпретируемых оболочкой.
4 ответа
var pad = function(num, totalChars) {
var pad = '0';
num = num + '';
while (num.length < totalChars) {
num = pad + num;
}
return num;
};
// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
// Trim trailing/leading whitespace
color = color.replace(/^\s*|\s*$/, '');
// Expand three-digit hex
color = color.replace(
/^#?([a-f0-9])([a-f0-9])([a-f0-9])$/i,
'#$1$1$2$2$3$3'
);
// Calculate ratio
var difference = Math.round(ratio * 256) * (darker ? -1 : 1),
// Determine if input is RGB(A)
rgb = color.match(new RegExp('^rgba?\\(\\s*' +
'(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
'\\s*,\\s*' +
'(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
'\\s*,\\s*' +
'(\\d|[1-9]\\d|1\\d{2}|2[0-4][0-9]|25[0-5])' +
'(?:\\s*,\\s*' +
'(0|1|0?\\.\\d+))?' +
'\\s*\\)$'
, 'i')),
alpha = !!rgb && rgb[4] != null ? rgb[4] : null,
// Convert hex to decimal
decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(
/^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])/i,
function() {
return parseInt(arguments[1], 16) + ',' +
parseInt(arguments[2], 16) + ',' +
parseInt(arguments[3], 16);
}
).split(/,/),
returnValue;
// Return RGB(A)
return !!rgb ?
'rgb' + (alpha !== null ? 'a' : '') + '(' +
Math[darker ? 'max' : 'min'](
parseInt(decimal[0], 10) + difference, darker ? 0 : 255
) + ', ' +
Math[darker ? 'max' : 'min'](
parseInt(decimal[1], 10) + difference, darker ? 0 : 255
) + ', ' +
Math[darker ? 'max' : 'min'](
parseInt(decimal[2], 10) + difference, darker ? 0 : 255
) +
(alpha !== null ? ', ' + alpha : '') +
')' :
// Return hex
[
'#',
pad(Math[darker ? 'max' : 'min'](
parseInt(decimal[0], 10) + difference, darker ? 0 : 255
).toString(16), 2),
pad(Math[darker ? 'max' : 'min'](
parseInt(decimal[1], 10) + difference, darker ? 0 : 255
).toString(16), 2),
pad(Math[darker ? 'max' : 'min'](
parseInt(decimal[2], 10) + difference, darker ? 0 : 255
).toString(16), 2)
].join('');
};
var lighterColor = function(color, ratio) {
return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
return changeColor(color, ratio, true);
};
// Use
var darker = darkerColor('rgba(80, 75, 52, .5)', .2);
var lighter = lighterColor('rgba(80, 75, 52, .5)', .2);
Теперь обрабатывает ввод RGB (A), а также шестнадцатеричный (3 цифры или 6).
Вы можете создать частично прозрачный белый или черный PNG и наложить (подложить?) На него при наведении курсора:
div.button {
background-color: #404040;
}
body>div.button:hover {
background-image: url('blackpixel.png');
}
JS не требуется.
Вам просто нужно прибавить (для более светлого) или вычесть (для более темного) равные количества из каждого компонента R, G, B.
Взгляните на Domino 2.0. - это небольшая библиотека JavaScript, предназначенная именно для этого.
Это просто модификация ответа отсутствие век ', так как я дважды видел одну и ту же функцию
var pad = function(num, totalChars) {
var pad = '0';
num = num + '';
while (num.length < totalChars) {
num = pad + num;
}
return num;
};
// Ratio is between 0 and 1
var changeColor = function(color, ratio, darker) {
var difference = Math.round(ratio * 255) * (darker ? -1 : 1),
minmax = darker ? Math.max : Math.min,
decimal = color.replace(
/^#?([a-z0-9][a-z0-9])([a-z0-9][a-z0-9])([a-z0-9][a-z0-9])/i,
function() {
return parseInt(arguments[1], 16) + ',' +
parseInt(arguments[2], 16) + ',' +
parseInt(arguments[3], 16);
}
).split(/,/);
return [
'#',
pad(minmax(parseInt(decimal[0], 10) + difference, 0).toString(16), 2),
pad(minmax(parseInt(decimal[1], 10) + difference, 0).toString(16), 2),
pad(minmax(parseInt(decimal[2], 10) + difference, 0).toString(16), 2)
].join('');
};
var lighterColor = function(color, ratio) {
return changeColor(color, ratio, false);
};
var darkerColor = function(color, ratio) {
return changeColor(color, ratio, true);
};
// Use
var darker = darkerColor('#404040', .2);
var lighter = lighterColor('#404040', .2);