ストライプ背景画像の作成

1. background image maker

「斜め線」や「平行線」、「ドット」、「グラデーション」の４パターンを簡単に作成することができます。また、線の間隔や、線の色、背景色、透過、サイズなども指定することができますので、かなり自由度が高いです。



使用方法
値を指定してから「Make」をクリックすると、右側にサンプルが表示されます。
「image」の下にある画像、あるいは、「URL」に表示されているアドレス先の画像をダウンロードすれば、画像の作成は完了です。


2. Stripe Generator 2.0

ストライプの太さや、間隔、色、背景色、方向などを指定するだけで、簡単に作成することができます。ストライプに影もつけることもできます。



使用方法
値を指定してから、右側のpreveiwの下の「ストライプ画像」をクリックすると、サンプルが表示されます。
「download」ボタンをクリックすると、生成した画像をダウンロードすることができます。

3. Stripe Designer

様々なストライプが多数用意されています。さらに、画像とストライプを合成したり、ストライプの編集も可能ですが、ストライプの色は変更できないみたいです。



画像を作成してダウンロード（保存）しましたら、あとは、画像をサーバーにアップロードして、スタイルシートで画像のURLを指定すれば完成です。

＜CSS の記述例＞

以上、ストライプ背景画像の作成方法を説明しました。

参考になりましたら、応援お願いします。