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

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

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

Hero Patternsというサイト!!

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

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

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

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

関連記事

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

ピックアップ記事

  1. 2014/5/14

    会社の形態

ピックアップ記事

  1. 2016-7-8

    【朗報】コーヒー嫌いでもおいしく飲める!苦くないコーヒー3選!

    紅茶派のガンボです。コーヒーは苦いし、後味が気持ち悪くてすきではありません、 が!たま〜〜〜〜に飲み…

ピックアップ記事

  1. 2016-11-9

    気軽に芸能人気分が味わえる?? 芸能人が愛するロケ弁BEST3!!

    最近我が社で2週間に一回、芸能界あるあるのロケ弁を頼んで社員全員でランチしよ…

ピックアップ記事

  1. 2016-11-14

    中目黒おすすめバー特集 Part.1

    中目黒にはオシャレなお店がたくさん。 服や雑貨、レストランだけでなく、 オシャレなバーもたくさんある…
ページ上部へ戻る
Top