「グラデーションにも対応できるJavaScriptカラーピッカー・「GPickr」」のご紹介| Webデザイン参考記事まとめアプデ

2019年08月15日(木)

グラデーションにも対応できるJavaScriptカラーピッカー・「GPickr」

0

2

0

13

GPickr

See the Pen KKPzPjr by kachibito
(@kachibito) on CodePen.

GPickrは単色だけでなく、CSSグラデーションにも対応できるカラーピッカーです。非依存型で単体で動作します。

複数増やすことができますので単純なグラデーションからかなり複雑なグラデーションも作成する事が出来ます。

カラーピッカーでグラデーションを取得するコンテンツがあるかどうかはさておき、選択肢があるのは良いことですね。

使い方

簡単な使い方。スクリプトを読み込んで
const gpickr = new GPickr({ el: '.hogehoge', stops: [ ['rgb(255,132,109)', 0], ['rgb(255,136,230)', 1] ] });
セッティングすれば初期設定はOKです。このままだとピッカーとして機能しないのでもろもろ書く必要ありますが。

細かな仕様はGithubをご参照ください。ライセンスは...

WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『グラデーションにも対応できるJavaScriptカラーピッカー・「GPickr」』についてまとめています。

この記事は特にjavascriptについて書かれており、気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。