昔つくったコレです

といっても諸事情でChromeだけ対応です

http://nmm.blog.jp/hp/tool/colorselector2.html

前回のはドラッグでバーを操作できなかったのでinputのrangeを使ってドラッグ操作もできるようにしました
あの矢印のままでonmousedown,onmouseup,onmousemove組み合わせて作っても良かったのですがrangeの方が楽そうだったので…

それともうひとつ、それぞれのバーをスライドさせた時にどの色になるか表示しているグラデーションを改良しました
前は、幅の小さいdivを色や透過度を変えて並べるという荒業でしたが、今回のは普通にcssのグラデーションで実装してます

といってもグラデーションはまだちゃんとした書き方が決まっていなく、ベンダープレフィックスが必要だったりで思い通りに表示されなかったりします
早く統一してほしいものです
Firefoxは前は問題なかったのですが、一部の繰り返しデザインで斜め線が入るようになってます
ここのデザインをChromeとFirefoxで見比べるとFirefoxだとおかしいのがあるのがわかります
http://lea.verou.me/css3patterns/

それとJavaScriptからスタイルを指定するとき、
div#h{
background-image:
-webkit-gradient(linear, left bottom, right top, from(#ff0000), color-stop(0.166, #ffff00), color-stop(0.333, #00ff00), color-stop(0.5, #00ffff), color-stop(0.666, #0000ff), color-stop(0.833, #ff00ff), to(#ff0000));
background-image:
-webkit-linear-gradient(0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-image:
-moz-linear-gradient(0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-image:
-ms-linear-gradient(0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-image:
-o-linear-gradient(0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
background-image:
linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}
のようなプロパティ名が一緒のときにどうすればいいのかわかりませんでした
プロパティ名にベンダープレフィックスがついてれば簡単なのですが…

JavaScriptなんだからブラウザ判定してそのブラウザ用のスタイル入れろ と言われればそれまでなのですけど

これと、inputのrangeでスライドバーの背景を消せるのがChromeだけだったということでChrome専用になりました


ChromeFirefox
cs2-chrome

cs2-firefox