RSSを購読する
follow us in feedly
ふかふか交易所 | ネットの情報をわかりやすくお届け!
RSSを購読する
follow us in feedly

ニュータウンシリーズ まとめ

マインクラフト関連記事 まとめ

VR関連記事 まとめ

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ下部へ

ホームページカテゴリ 新着記事

サイト内検索

過去7日間の人気記事

  • 総合
  • ゲーム
  • 動画
  • ホームページ

ホーム > ホームページカテゴリー No.31 ~ No.40 > 記事No.40

斜線背景の画像を簡単に生成することのできるおすすめサイト

← 前の記事

次の記事 →

shasen

「斜線の模様でボタンや背景にアクセントを付けたい!」そう思ってもCSSで適用しようとするとコードが長くなってしまいますし、各プラウザごとに適用させる必要もあり面倒くさいですよね('A`)

そこで今回は、ホームページの素材などに利用することのできる、斜線背景の画像を簡単に生成することのできるおすすめサイトをご紹介します!

Stripe Generatorへのアクセス

Stripe Generator

上記のサイトのジェネレータを活用することで思い通りの斜線背景画像を生成することができます。

ジェネレータの使い方

ジェネレータの各値の説明は以下の通りです。

・stripe size: 斜線の太さ

・spacing: 斜線間の感覚

・stripe color(s): 斜線の色

・background style: 背景のグラデーションの種類

・gradient height: グラデーションの高さ

・background color(s): 背景の色

・stripe orientation: 斜線の方向


以上の設定値をいじって斜線画像をカスタムしていきます。(カスタム状況は右の"preview"枠に表示されます)

カスタムが完了したら"download"ボタンをクリックします。すると斜線画像をpng画像として保存できます。


要素への斜線画像の適用

ホームページの背景もしくはボタンなどの要素に斜線画像を適用する際、まず要素に対しCSSで画像を読み込みます。

次に適用した画像を横方向(x軸方向)にリピートさせることで、要素の全体に斜線画像が表示されます。

これで斜線画像の生成&適用が完了しました!

アクセントとして要素に適用することで自分のサイトを更にオシャレにしちゃいましょう!((´∀`))

関連記事はこちら

- GIMP2で画像に薄く斜線を表示させる方法 | ふかふか交易所

- ホームページなどに使えるオシャレなロゴを簡単に生成する ...

- 吹き出しを作るためのCSSが簡単に生成できるおすすめサイト ...

- キーワードからホームページ内の関連記事をリスト化して ...

- サイトの全てのページのリンク切れを一括で調べる方法(SEO対策 ...

- ホームページの記事上部にシンプルな目次を簡単に設置する ...

- ホームページにサムネイル付きスライドショーを簡単に設置 ...

  ■ 一言コメントをどうぞ!(100字まで)


過去7日間の人気記事

マインクラフト関連記事 まとめ

VR関連記事 まとめ

Aviutl(動画編集)関連記事まとめ

AR関連記事 まとめ

ご意見・ご質問等は 掲示板へ!

コメントを公開されたくない場合は メッセージフォームへ!


当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 ホームページ 掲示板 お問い合わせ サイトマップ ページ上部へ