CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS – かちびと.net ちょっと面白かったので備忘録。CSS3で多層グラデーションの背景を手軽に作れる、というスクリプト。jQueryに依存します。レイヤーはランダムに組まれるみたいですね。 …

katibito.netさんで取り上げられていて面白そうだったんで早速飛びつきました。

スクリプトが走ると自動で色づけしてくれるようです。

SHARDS – A jQuery plugin

公式のdemoはこちら。むっちゃオシャレんてぃです。

$('element').shards(col1,col2,highlight,levels,complexity,lightness,alpha,fullscreen);

これだけで要素をグラデーションかける事ができます。色つきクリスタルを割ったような鮮やかでシャープなグラデ。かっこいい！

要素はそれぞれ

colour 1/カラー１　　　　　　　　　　　: rgba array-> [255,255,55,.5]
colour 2/カラー2　　　　　　　　　　　　: rgba array-> [255,255,55,.5]
shade colour/グラデカラー　　　　　　　: rgba array-> [255,255,55,.5]
number of shards/重なる色の数　　　　　: integer-> 12 max:100
comlexity/複雑さ（色の変化の多さ的な）　: decimal-> .8 max:1
lightness/明るさ　　　　　　　　　　　　: integer-> 2 max:3
alpha/透明度　　　　　　　　　　　　　　: decimal-> .8 max:1
fullscreen/フルスクリーン　　　　　　　: boolean-> true

こんな感じですか。

色々いじってみたついでにdemoも用意してみました！

DEMO / test

グラデーション！ボタンで色々遊べます。動作チェックにでもどうぞ。うん、楽しかった。