ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近、大きな画像を背景に当てた表示が増えています。これまでDOMの背景と言えば単一色ばかりだったので、画像を使うとインパクトが強くなります。しかし画像はバイナリなので重たくなってしまうのが難点です。

そこで使ってみたいのがPatternBoltです。背景にSVGを使うことで、CSSやJavaScriptとも連携した表示が可能になります。

PatternBoltの使い方

デモです。パターン、サイズ、カラーが変更できます。
デモです。パターン、サイズ、カラーが変更できます。

斜めのストライプ。
斜めのストライプ。

色をピンク系にしてみました。
色をピンク系にしてみました。

画像の上にSVGパターンを載せることもできます。
画像の上にSVGパターンを載せることもできます。

PatternBoltは複数のパターンで色やサイズを自由に変更できるようになっています。コンテンツに合わせて背景を変えたりすると、写真とは違った自由度で楽しめるようになりそうです。

PatternBoltはJavaScript/CSS3製、MIT Licenseのオープンソース・ソフトウェアです。

PatternBolt

buseca/patternbolt

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2