ちょっと面白かったので備忘録。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>
みたいになるのでちょっとアレですけど・・・
クライアントワークでは僕は恐らく使わないでしょうけど、これはこれで面白かったです。スクリプトは以下よりどうぞ。