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

no-imageレスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」前のページ

レスポンシブに対応したモーダルウィンドウのようなアラート実装「jquery.alert」次のページno-image

関連記事

  1. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

  2. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  3. stickUp
  4. BookBlock Revised
  5. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

  6. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

最近の記事

  1. 田沢湖
  2. ゴムの耳栓
  3. ライオンコーヒー(バニラマカダミア)
PAGE TOP