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

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

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

Hero Patternsというサイト!!

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

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

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

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

関連記事

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

ピックアップ記事

  1. 2016-7-19

    TV番組を見逃した方必見‼︎【TVer・ティーバー】の魅力

    引用:http://picworld.e-monster.jp/2015/07/21/tverティー…

ピックアップ記事

  1. 2016-10-14

    【テクニック不要!】合コンで絶対に守るべき5つのポイント

    合コンで出会った女の子となかなか次に発展しない… お礼のLINEを送っても返ってきたことがない…そ…

ピックアップ記事

  1. 2016-6-28

    【売れっ子への道渋滞中】若手芸人高齢化について考える。其の一

    若手といえば何才くらい?テレビで体を張って笑いを取る若手芸人たち。「若手」という言葉を聞けば、誰もが…
ページ上部へ戻る
Top