CSS3による多層グラデーションを使った背景を作れるjQueryプラグイン・SHARDS

スポンサーリンク

ちょっと面白かったので備忘録。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

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services