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

qaaaabjru5erkjggg

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

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

Hero Patternsというサイト!!

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

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

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

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

関連記事

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

ピックアップ記事

  1. スクリーンショット 2016-02-28 16.02.03
  2. kinoshita_fw_5
  3. zvrvfeqzum4iw3wwxrasevwmfx6p08qawpptoo6wrii
  4. スクリーンショット 2016-06-22 2.57.23
  5. ハウルの動く城1
  6. noimage
  7. $T2eC16d,!)8E9s4l8iBEBSI+VpYEyw~~60_3
  8. noimage

ピックアップ記事

  1. cccc64b80c28233edf50ef0054981906_m

    2016-6-29

    医療全身脱毛はスゴイけどめちゃめちゃ痛い

    現在、医療レーザーの全身脱毛にかよっています。ハッキリ言います。めちゃめちゃ痛くて、 毎…

ピックアップ記事

  1. %e3%81%82%e3%81%9f%e3%81%9f%e3%82%81%e3%82%8b%e3%81%a8%e3%80%81%e3%81%97%e3%81%82%e3%82%8f%e3%81%9b%e3%81%ab%e3%81%aa%e3%82%8b%e3%80%82%e3%83%9b%e3%83%83%e3%83%88%e3%81%aa%e3%83%8f%e3%83%bc%e3%83%95

    2016-12-6

    2016年冬のオススメLP5選!!

    最近太りに太りまくっています。 はぁ・・・。 ということでお気に入りのLPを紹介します。 …

ピックアップ記事

  1. img108

    2016-10-4

    おもしろ可愛い♥ハロウィン限定メニュー2016!EGGS ’N THINGS、Q-pot CAFE、とらやカフェなどなど・・・

    ハロウィン限定メニュー&スイーツ特集もうすぐハロウィン!ということで、今回は都内のカフェを中心にハロ…
ページ上部へ戻る
Top