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

多層グラデーションな背景を作れる、というもの。用途は限られそうですけど、なかなか素敵な感じ。

SHARDS

こういう背景を色を指定してランダムに作成出来ます。

以下サンプルです。

Sample

リロードする度に異なったグラデーションが作られます。

コード

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="shards.min.js"></script>

本体とプラグインを読み込む・・・のですが、1.9だと動かないっぽい？

$('#foobar').shards(
　　　[239,199,222,.0],
　　　[123,203,189,.0],
　　　[255,203,49,.0],
　　　20,.8,2,.15,true
);

で、グラデーションを作る。

<div id="foobar"></div>

最後にボックスを用意すればOKです。

<div id="foobar" style="background-image: -webkit-linear-gradient(263deg, rgba(10, 35, 180, 0.247059) 27%, rgba(0, 0, 0, 0.～"></div>

みたいになるのでちょっとアレですけど・・・

クライアントワークでは僕は恐らく使わないでしょうけど、これはこれで面白かったです。スクリプトは以下よりどうぞ。

SHARDS / on Github