Reshader

JavaScript

カラーの濃淡を得ることができるJavaScriptライブラリ「Reshader」

Reshaderは、カラーの濃淡を得ることができる便利なJavaScriptライブラリです。指定した任意のカラー値を基準にして、そのカラーより薄い色から濃い色までのカラー値を取得することが可能です。オプションも用意されているので、カスタマイズ性も高いライブラリに仕上がっています。

Reshader

デモ

Usageという項目がある場所に、カラーコード(hex)を入力するボックスが用意されています。デモページ読み込み時には「#6EEB83」という値が指定されていて、その下には指定したカラーコードを基準にして作られた濃淡の異なるカラーとカラーコードのリストが表示されています。

ボックス内に好きなカラーコードを入力すると、リアルタイムで反映されます。特定の色を元に濃淡の異なるカラーコードを取得したい場合にはとても役立つ機能ですね。

また、APIではcolorとoptionsのセッティングができるようになっています。colorには先ほどのhexのほか、rgbやhslでの指定も可能です。

optionsには、numberOfVariations、contrastRatio、outputModel、shouldIgnoreRepeated、shouldIgnoreWhites、shouldIgnoreBlacksといった項目があります。

多彩なカスタマイズを施せるのも、このJSライブラリの魅力になっています。

Reshader

tsorterテーブルにソート(並べ替え)機能を実装できる「tsorter」前のページ

シンプルで美しいレスポンシブ対応のパララックス実装「JQuery Background Image Scroll」次のページno-image

関連記事

  1. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

  2. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  3. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  4. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  5. Menu Droplet Animation
  6. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

最近の記事

  1. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  2. ライオン システマ 超コンパクト ふつう
  3. タリーズ ハムチーズ&サラダサンド
  4. クリニカのY字タイプのフロス
  5. 日和山公園の桜

アーカイブ

PAGE TOP