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

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

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

Hero Patternsというサイト!!

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

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

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

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

関連記事

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

ピックアップ記事

  1. 2016/3/2

    最強の営業

ピックアップ記事

  1. 2016-10-25

    へっぽこデザイン備忘録〜CSSだけで簡単にランキング順位を表示させる方法〜

    夏にコートを捨ててしまったので、早く買いに行かないと死ぬかもしれません。 去年は掛け布団を捨てて凍…

ピックアップ記事

  1. 2015-9-18

    アメリカでサルバドール・ダリを見てきました。

    こんにちは!9月5日〜11日までアメリカに行ってきました。ツアーの詳細を全く確認せずに旅だったので、…

ピックアップ記事

  1. 2016-11-8

    女性に嬉しい♪冷え性、生理痛にも効く、万能乾燥生姜の効果と簡単レシピ

    生姜好きガンボです!! でも生姜って買っても1個使い切るのに時間がかかりませんか? 特に1人暮ら…
ページ上部へ戻る
Top