【CSS】背景画像にかぶせるパターンを簡単につくれる Patternify を使ってみた

こんにちはデザイナーの[@kanna](https://twitter.com/white_raichi)です。
前からずっと気になっていた __背景画像や動画にパターンを被せる方法__ を学ぶ機会があったので学習メモとして残しておきます。

#どこにパターンをかけるのか
* Webサイトのファーストビュー

#作成の流れ
1. ツールを使ってパターンを作成する
1. 生成されるコードをコピー
1. cssの該当ヶ所にコピーしたコードをペースト
1. cssにパターンを表示するコードを追記する

#使用するツール
見つけたのは「Patternify」というサイトを利用する方法です。

http://www.patternify.com/

開くとこんな画面が表示されます↓


<img width="600"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/9e5c2246-ea5c-aaf4-3247-d8af60bd4edc.png">


#Patternifyの使い方

<img width="600"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/cbd9a543-13bf-3508-a9f2-3e7e02adb6e3.png">

__【機能説明】__
__①パターン作成エリア
②表示エリアを指定する
③カラーパネル　
④opacity＝透明度調整
⑤４つのアイコン（戻る/ペン/消しゴム/スポイト）__

パターンはリピートされる前提なので、左右上下にリピートされた場合どのように見えるかを考えながら作成するのがポイントです。いろいろイジってみましょう。作成したパターンは右側の  __`Preview`__で確認できます。
※ペンツールの下にいくつかパターン

とは言っても実際のデザインに反映してみないとなかなかイメージ出来ないかと思うので、コードに埋め込んで確認をしながら調整をするようにしましょう。

#作成したパターンをデザインに反映させる

####作成したパターンの使い方は__3パターン__あります。
1. previewの「Download PNG」ボタンを押してダウンロードして使用する
1. Base64 Codeに表示されている⑥のコードを使う
1. ⑦の「Get Pattern URL」ボタンを押してURLを取得して使う

<img width="600"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/cb802a04-aca3-28ba-866d-5a27ede75af9.png">

今回はコード埋め込みをして利用するので、Base64 Codeに表示されている⑥のコードを使って埋め込んでみます。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyRMZgO" data-user="kanna999-" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kanna999-/pen/dyRMZgO">
  背景画像の上にパターンをのせる</a> by m-akagi (<a href="https://codepen.io/kanna999-">@kanna999-</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>





ファーストビューの背景画像を指定したCSSのクラスに追記します。サンプルでは`.src1`クラスに追記しています。

```css:css
.src1 {
   background-image: url("ここにパターンのコードをペースト"),url("背景画像のURL");
}
```

background-image:url("背景画像のURL");にもう１つ `url(""),`を追加してその中に⑥のコードをペーストします。`url(""),`は背景画像のurlの前に入れます。
URLを入れただけではパターンが反映されないので、CSSを追記していきます。

```css:css
.src1 {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAABhJREFUGFdjZEACjHp6ev8vXboEphmRZQBrKwWNTXkrSAAAAABJRU5ErkJggg=="),url("https://drive.google.com/uc?export=view&id=1D8WqoRgWao_Ac_xUh9cAmozt6JBE0LUx");/* 背景画像の前にパターンのURLを入れる */
  background-repeat: repeat, no-repeat; /* パターンのリピート */
  background-blend-mode: overlay; /* パターンをオ−バーレイで表示 */
  background-size: auto, cover;/* パターンにautoを指定 */
  position: absolute; /* absoluteに指定 */
  width: 600px;
  height: 450px; 
  top:0;
  left:0;
  z-index: 1;/* 前面に表示 */
}

```
上記コメントを入れた部分を追記すると、背景画像の前面にリピートのかかったパターンが表示されるようになります。

#ビフォー、アフターの画像を比較
パターン無しと背景画像にパターンをかけた場合の違いを比較してみる。

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/0e25a850-0651-4ad0-d167-fc745b87e420.png">

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/7a2029d4-4a2f-cf0a-85a1-cf916b2a9771.png">

かけた方の雰囲気の方がリッチでおしゃれな感じがして個人的に好きです。動画にパターンをかけるのもかっこいいと思います。もちろんサイトの雰囲気や画像によってはパターンをかけない方がいいものもあるので、どんな効果を演出したいかに合わせて使い分けていきましょう。

#参考パターンサンプル
いくつか作成したので参考までに載せておきます。
パターン作成パネルの下にもいくつかありますので是非いろいろ試してみてください。

####Sample１: 適当に作成したパターン
<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/623c6ad2-7f70-0ad3-54ee-f0567fb0748f.png">

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/20ac49ac-00aa-6ede-acbf-00e572214049.png">


####Sample2: 横ボーダー
<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/67ade18b-625a-eb24-795e-89459db66b37.png">

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/371e7413-12bc-864a-9ec0-2dbd7b76aba6.png">


####Sample３:カラーのパターン（画像が少し青みがかる）

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/0c5d1596-0e55-9e0a-a789-166216594b24.png">

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/ac384430-e6e5-68ce-ada5-c5a2af0c3c62.png">


####Sample４:斜線パターン（左下の「Old School」にあります）

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/abcec2fc-7890-7893-5b4f-cffa4405d57a.png">

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/6ef7f50d-0d0e-3e11-4f93-88147872a839.png">


####Sample５:網掛けパターン

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/1faf2e81-bc02-b1c1-b372-b2c316cf6ff3.png">

<img width="860"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/486362/710ce81c-76bd-cd5b-73ce-c0554cc2c0d2.png">


#おわりに
パターンのかけ方を学んで仕組みを理解できたので、今後はデザインを構築にまわす時に一緒にパターンも指示できるのが嬉しいです。（デザイナーが指示すべきなのかは不明ですが…）

今までデザインの領域でパターンを作成するのがとても困難でした。
画像に細かいパターンをかけるとデザインデータがクソ重たくなって動かなくなるのでなるべく避けたんですが、もうそういう心配もしなくてよさそうです。


#参考サイト

https://ai-communication.jp/yuriblog9-2/

https://www.kyumamorita.com/entry/dot_background-image

https://webdesign-trends.net/entry/12013