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