no-image

JavaScript

フラットでシンプルなカラーピッカー実装「Pickr」

Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です。レスポンシブにも対応しているほか、jQueryなどへの依存性もなくモバイルにも最適ですね。すべてのCSSフレームワークとの互換性もあるとのこと。

HEXやRGBaの値を直接入力することも可能

デモ

デモでは「Pick a color!」と書かれた四角いアイコン部分をクリックすると、カラーピッカーが表示されます。

フラットデザインを採用したカラーピッカーは、シンプルで見やすく操作も簡単でとても使いやすいです。好きな色の部分を選択して「Save」をクリックするとその色に設定できます。HEX、RGBa、HSVaの値を直接入力して色を決めることも可能です。

また、Pickrではel、default、showAlways、appendToBody、position、components、stringsなどオプションによるセッティングもいろいろできるので、カスタマイズしたい人にも嬉しい仕様になっています。ファイル容量もgzip版で8KBと軽量なところもグッドです。

Pickr

関連記事

  1. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  2. FitVids.JS

    JavaScript

    YouTubeやVimeoからの埋め込み動画をレスポンシブにするjQueryプラグイン「FitVid…

    YouTubeやVimeoからの埋め込み動画をレスポンシブに対応させる…

  3. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  4. Cavendish.js

    JavaScript

    CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「…

    CSS transitionsを活用したシンプルなスライドショーを実装…

  5. jumboShare

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

  6. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP