配色が苦手な人に!写真やイラストに使用されているカラーから画像を引き立たせる美しいグラデーションをつくりだすスクリプト -Grade.js

写真やイラストに使用されているカラーの中から、主要なカラーを選び出し、その画像を引き立たせるグラデーションをつくりだすスクリプトを紹介します。

Grade.jsで作成したグラデーション

Grade.js
Grade.js -GitHub

シンプルなカラー構成でも、繊細なグラデーションが生成されます。

Grade.jsで作成したグラデーション

Grade.jsのデモ

デモではさまざまなタイプの画像から、美しいグラデーションを生成しています。

サイトのキャプチャ

デモページ

サイトのキャプチャ

デモページ

Grade.jsの使い方

Step 1: JavaScript

当スクリプトを外部ファイルとして記述し、スクリプトを初期化します。

Step 2: HTML

グラデーションを生成する要素に「.gradient-wrap」を与えます。

top of page

©2017 coliss