05.02.2015, 09:23
|
 |
Аспирант
|
|
Регистрация: 02.03.2011
Сообщений: 38
|
|
|
Средний цвет между двумя цветами
Всем привет!
Хотел поинтересоваться. Есть несколько блоков, идущих друг за другом.
Нужно, чтобы задав 2 цвета, блоки заливались цветами, перетекающими от первого цвета к другому.
Возможно ли это сделать?
|
|
05.02.2015, 09:48
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
<style>
div{
height: 100px;
background: #F00;
transition: background-color 0.5s;
}
div:hover{
background: #0F0;
}
</style>
<div></div>
__________________
В личку только с интересными предложениями 
|
|
05.02.2015, 10:05
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
|
Сообщение от raler
|
|
Нужно, чтобы задав 2 цвета, блоки заливались цветами, перетекающими от первого цвета к другому.
|
Ты картинкой челе такое покажи... |
|
05.02.2015, 10:39
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Сообщение от raler
|
|
Возможно ли это сделать?
|
да - (где то было) |
|
05.02.2015, 11:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
Градиент блоков
raler,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 80px;
height: 80px;
float: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
function gradient(from, to, num) {
var arr = [];
num--;
for (var i = 0; i <= num; i++) {
var color = [],
l = from.length;
for (var k = 0; k < l; k++) {
color[k] = (to[k] - from[k]) * (i / num) + from[k];
k < 3 && (color[k] = Math.round(color[k]))
}
arr[i] = 'rgb' + (l == 4 ? 'a(' : '(') + color + ')';
}
return arr
}
var base = gradient([0, 0, 255, .9], [255, 0, 255, .3], 10)//или gradient([0, 0, 255], [255, 0, 255], 10)
$.each(base, function(indx, el) {
$('<div/>', {
css: {
'background-color': el
}
}).appendTo('body')
});
});
</script>
</head>
<body>
</body>
</html>
Последний раз редактировалось рони, 06.03.2018 в 12:08.
|
|
05.02.2015, 14:25
|
|
Аспирант
|
|
Регистрация: 02.03.2011
Сообщений: 38
|
|
Сообщение от рони
|
raler,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 80px;
height: 80px;
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
function gradient(from, to, num) {
var arr = [];
num--;
for (var i = 0; i <= num; i++) {
var color = [],
l = from.length;
for (var k = 0; k < l; k++) {
color[k] = (to[k] - from[k]) * (i / num) + from[k];
k < 3 && (color[k] = Math.round(color[k]))
}
arr[i] = 'rgb' + (l == 4 ? 'a(' : '(') + color + ')';
}
return arr
}
var base = gradient([0, 0, 255, .9], [255, 0, 255, .3], 10)//или gradient([0, 0, 255], [255, 0, 255], 10)
$.each(base, function(indx, el) {
$('<div/>', {
css: {
'background-color': el
}
}).appendTo('body')
});
});
</script>
</head>
<body>
</body>
</html>
|
То, что нужно, спасибо |
|
|
|
