へっぽこデザイン備忘録〜好きな模様を選んでSVGの背景パターンを生成&CSSコードで使用できるHero Patterns〜

qaaaabjru5erkjggg

今回は便利なHPを紹介します。

好きな模様と色を選んでSVGの背景パターンを生成し、CSSで設定できる!

Hero Patternsというサイト!!

2016年10月17日現在、40種類のパターンがあり、色も自由に変えることが出来ます。
そして、自分の好きな色を選んだらCSSコードを設定したいタグにつけるだけ!
SVGだから画像のようにぼんやりすることもなく、きれいなパターンを簡単に生成、設定できます。

awrlbzzxujnaaaaaaelftksuqmcc
①CSSコード
②パターン
③上から【模様の色】【背景の色】【模様の透明度】
ね?メッチャ簡単!

そして今回はサンプルを用意しましたので是非御覧ください。(使ってみたかった)
サンプル

SVGが対応していないブラウザがまだあるかもしれないので、大々的には使えないかもしれないですが・・・。
今度はSVG対応ブラウザについても調べてみようと思います。

関連記事

コメントは利用できません。

ピックアップ記事

  1. Print
  2. 名称未設定-103
  3. 4549337671089_02_400
  4. スクリーンショット 2016-07-18 18.30.52
  5. 壁ドン
  6. %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-07-16-19-04
  7. スクリーンショット 2015-08-02 18.28.44

ピックアップ記事

  1. qaaaabjru5erkjggg

    2016-10-17

    へっぽこデザイン備忘録〜好きな模様を選んでSVGの背景パターンを生成&CSSコードで使用できるHero Patterns〜

    今回は便利なHPを紹介します。 好きな模様と色を選んでSVGの背景パターンを生成し、CSSで設定で…

ピックアップ記事

  1. スクリーンショット 2016-09-05 22.15.23

    2016-9-7

    フリースタイルダンジョンはなぜ流行ったのか??初心者でもわかるラップの楽しみ方!!!!

    引用:http://www.tv-asahi.co.jp/freestyledungeon/ なぜ今…

ピックアップ記事

  1. フリー素材

    2016-5-11

    自分が思いついたサービスは他の誰かも考えている

    こんばんにちは。日時過ごしていると、こんなサービスあればいいのに。なんてことをよく考えることがある。…
ページ上部へ戻る
Top