前の記事 ≪:グラデーションがかかった特徴ある線グラフが描画できる「Bobbograph」
次の記事 ≫:マルチカラムなドロップダウンメニューが実装できるjQueryプラグイン...

CSS3のグラデーションがより簡単に使えるようになるjQueryプラグイン「Rainbow.js」

2014年03月18日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Rainbow.js

CSS3のグラデーションがより簡単に使えるようになるjQueryプラグイン「Rainbow.js」。
プラグインを読み込めば、<div class="square rainbow" id="gradient_2" data-type="linear" data-degrees="45" data-color="f1c40f-d35400" data-opacity="1" ></div> のように、data-でグラデーション情報を定義すれば、CSS3を定義しなくても簡単にグラデーションが作れるようになります。
既存の画像の上にグラデーションをオーバーレイするエフェクトをかけることも出来ます。



画像にグラデーションをかける例。





関連エントリ

関連の記事検索:JavaScript, jQueryプラグイン, CSS3
スポンサード リンク

By.KJ : 2014年03月18日 09:00 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)