「斜線の模様でボタンや背景にアクセントを付けたい！」そう思ってもCSSで適用しようとするとコードが長くなってしまいますし、各プラウザごとに適用させる必要もあり面倒くさいですよね('A`)
そこで今回は、ホームページの素材などに利用することのできる、斜線背景の画像を簡単に生成することのできるおすすめサイトをご紹介します！
Stripe Generatorへのアクセス
上記のサイトのジェネレータを活用することで思い通りの斜線背景画像を生成することができます。
ジェネレータの使い方
ジェネレータの各値の説明は以下の通りです。
- stripe size： 斜線の太さ
- spacing： 斜線間の感覚
- stripe color(s)： 斜線の色
- background style： 背景のグラデーションの種類
- gradient height： グラデーションの高さ
- background color(s)： 背景の色
- stripe orientation： 斜線の方向
以上の設定値をいじって斜線画像をカスタムしていきます。(カスタム状況は右の"preview"枠に表示されます）
カスタムが完了したら"download"ボタンをクリックします。すると斜線画像をpng画像として保存できます。
要素への斜線画像の適用
ホームページの背景もしくはボタンなどの要素に斜線画像を適用する際、まず要素に対しCSSで画像を読み込みます。
background-image: url("画像名.png");
次に適用した画像を横方向(x軸方向)にリピートさせることで、要素の全体に斜線画像が表示されます。
background-repeat: repeat-x;
これで斜線画像の生成&適用が完了しました！
アクセントとして要素に適用することで自分のサイトを更にオシャレにしちゃいましょう！((´∀｀))
