12.04.2010, 23:06
|
 |
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сообщение от Aetae
|
|
во-первых тормоза
|
Ну тормоза только при инициализации и то если генерить большие градиенты... Такой вариант хорош в составе форм - поля обычно не большие...
|
Сообщение от Aetae
|
|
куча мусорного кода
|
Ну куча, ну мусора... За-то JS Не много  |
|
15.04.2010, 15:48
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
По поводу CSS градиентов.
Opera - не поддерживает. Нужно использовать Canvas+JavaScript.
Firefox - с версии 3.6 (Январь 2010г. - совсем свежая).
IE - нужно создавать 6 блоков и заливать их цветами, т.к. их мегафильтры умеют генерить градиент только из 2 цветов. К тому же последний нужно позиционировать скриптом.
Safari - всё ок.
Думаю оно того не стоит
Уж лучше на SVG. Но тут опять же кроссбраузерный геморрой. Пока вариант на дивах выигрывает, есль не хочется тонну кода для такой простой вещи.
Кому интересно, вот код. Без оперы.
<style type="text/css">
html, body{
margin:0;
padding:0;
}
.colorPicker{
background-image: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background: -webkit-gradient(linear, left top, right top, from(#FF0000), to(#FF0800), color-stop(.1666,#FFFF00),color-stop(.333,#00FF00),color-stop(.5,#00FFFF),color-stop(.666,#0000FF),color-stop(.833,#FF00FF));
overflow:hidden;
position:relative;
height: 20px;
display:block;
margin:0;
padding:0;
}
.colorPicker .colorItem{
display:block;
float:left;
width:16.66%;
height:20px;
}
.colorItem.color1{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000, endColorstr=#ffffff00, GradientType=1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000, endColorstr=#ffffff00, GradientType=1);
}
.colorItem.color2{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff00, endColorstr=#ff00ff00, GradientType=1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff00, endColorstr=#ff00ff00, GradientType=1);
}
.colorItem.color3{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00ff00, endColorstr=#ff00ffff, GradientType=1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00ff00, endColorstr=#ff00ffff, GradientType=1);
}
.colorItem.color4{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00ffff, endColorstr=#ff0000ff, GradientType=1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff00ffff, endColorstr=#ff0000ff, GradientType=1);
}
.colorItem.color5{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0000ff, endColorstr=#ffff00ff, GradientType=1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff0000ff, endColorstr=#ffff00ff, GradientType=1);
}
.colorItem.color6{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff00ff, endColorstr=#ffff0000, GradientType=1)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff00ff, endColorstr=#ffff0000, GradientType=1);
}
</style>
<div class="colorPicker">
<div class="colorItem color1"></div>
<div class="colorItem color2"></div>
<div class="colorItem color3"></div>
<div class="colorItem color4"></div>
<div class="colorItem color5"></div>
<div class="colorItem color6"></div>
</div>
Последний раз редактировалось B~Vladi, 15.04.2010 в 15:52.
|
|
15.04.2010, 18:06
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
А Opera с версии 9.5 поддерживает SVG в background-image, который, как Data URI можно записать
Последний раз редактировалось Octane, 15.04.2010 в 18:10.
|
|
15.04.2010, 18:18
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сообщение от Octane
|
|
А Opera с версии 9.5 поддерживает SVG в background-image, который, как Data URI можно записать
|
Это как? |
|
15.04.2010, 18:50
|
|
|
|
Регистрация: 10.07.2008
Сообщений: 3,873
|
|
Градиент для Opera 9.5+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Градиент (только для Opera 9.5+)</title>
</head>
<body>
<style type="text/css">
.colorPicker {
height: 20px;
width: 300px;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KDQoJPGRlZnM+DQoJCTxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjAlIj4NCg0KCQkJPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDI1NSwwLDApO3N0b3Atb3BhY2l0eToxIi8+DQoJCQk8c3RvcCBvZmZzZXQ9IjIwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDI1NSwyNTUsMCk7c3RvcC1vcGFjaXR5OjEiLz4NCg0KCQkJPHN0b3Agb2Zmc2V0PSIyMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYigyNTUsMjU1LDApO3N0b3Atb3BhY2l0eToxIi8+DQoJCQk8c3RvcCBvZmZzZXQ9IjQwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDAsMjU1LDI1NSk7c3RvcC1vcGFjaXR5OjEiLz4NCg0KCQkJPHN0b3Agb2Zmc2V0PSI0MCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYigwLDI1NSwyNTUpO3N0b3Atb3BhY2l0eToxIi8+DQoJCQk8c3RvcCBvZmZzZXQ9IjYwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDAsMCwyNTUpO3N0b3Atb3BhY2l0eToxIi8+DQoNCgkJCTxzdG9wIG9mZnNldD0iNjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2IoMCwwLDI1NSk7c3RvcC1vcGFjaXR5OjEiLz4NCgkJCTxzdG9wIG9mZnNldD0iODAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2IoMjU1LDAsMjU1KTtzdG9wLW9wYWNpdHk6MSIvPg0KDQoJCQk8c3RvcCBvZmZzZXQ9IjgwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDI1NSwwLDI1NSk7c3RvcC1vcGFjaXR5OjEiLz4NCgkJCTxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiKDI1NSwwLDApO3N0b3Atb3BhY2l0eToxIi8+DQoNCgkJPC9saW5lYXJHcmFkaWVudD4NCgk8L2RlZnM+DQoJPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6dXJsKCNncmFkaWVudCk7Ii8+DQoNCjwvc3ZnPg0KDQo=) no-repeat;
}
</style>
<div class="colorPicker"></div>
</body>
</html>
SVG-файл
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="20%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="20%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="40%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>
<stop offset="40%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>
<stop offset="60%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="60%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="80%" style="stop-color:rgb(255,0,255);stop-opacity:1"/>
<stop offset="80%" style="stop-color:rgb(255,0,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<rect width="100%" height="100%" style="fill:url(#gradient);"/>
</svg>
Возможно SVG-файл можно сократить.
DataURLMaker (надо только не забыть image/svg+xml в CSS подставить и внутри <style type="opera/css"> не будет работать)
Последний раз редактировалось Octane, 15.04.2010 в 19:01.
|
|
15.04.2010, 18:59
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Ну понятно. В общем вариант с СSS отпадает.
|
|
16.04.2010, 10:52
|
 |
Рассеянный профессор
|
|
Регистрация: 06.04.2009
Сообщений: 2,379
|
|
Я когда только учил js, делал похожий, только квадратный, к верху он осветлялся, посередине нормальные цвета и к низу затемнялся (как в фотошопе, только высота больше), ради интереса генерировал побольше размером, комп секунд на 20 зависал, потом что-то по ошибке намудрил в коде и выдал он мне какой-то офигительный узор, типа фрактала, я потом специально всяко мудрил там, но ничего столь же интересного так и не вышло  .
upd: еще там учитывался тот факт, что человеческий глаз воспринимает светлость компонентов (r g b) по-разному, красный везде немного осветлялся, синий еще больше.
Последний раз редактировалось Riim, 16.04.2010 в 10:56.
|
|
16.04.2010, 13:15
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сообщение от Riim
|
|
upd: еще там учитывался тот факт, что человеческий глаз воспринимает светлость компонентов (r g b) по-разному, красный везде немного осветлялся, синий еще больше.
|
Да, это заметно если сравнивать с фотошопской полосой. |
|
|
|
