複数の背景画像とCSSグラデーション

伊勢丹の新しいタータンのような矩形模様の繰り返しに過ぎないものは、多数の背景画像を気軽に扱える時代になったので、CSSグラデーションで簡単に作ることができる時代になった。最近あまりCSSグラデーションを書いてなかったので、今時のグラデーション文法の復習も兼ねて作った。

Demo: New Isetan Tartan

チェックを構成する線をそれぞれ背景画像として定義し、特定の順番で重ねるという方法で行う。新タータンの場合は上から順にのような重なりになっている。

  1. 赤の縦線
  2. 赤の横線
  3. 黄の縦線
  4. 黄の横線
  5. ベースの緑

background-imageプロパティーで複数の背景画像を重ねた場合は先に書いた画像が手前に来るので1から4に順にグラデーションとして書いていく。それぞれのグラデーションはtransparentキーワードを使って綺麗に切り替わるように調節してやれば良い。

.test {
  background-color:
    linear-gradient(
      to right,
      transparent 0,
      transparent 100px,
      rgba(255, 102, 153, 0.5) 100px,
      rgba(255, 102, 153, 0.5) 132px,
      transparent 132px,
      transparent 100%
    )
  ;
  background-size: 200px 1px;
}

こうすると100pxから132pxまで横方向に赤でソリッド塗りつぶしたグラデーションが作れる。重なりの表現はrgba()を使うのが手っ取り早かったのでそうした。併せてリピートを調節するためにbackground-sizeプロパティーで大きさを指定しておく。

こうやって作ったCSSグラデーションを重ね、最後にベースの緑をbackground-colorプロパティーで指定して完成。これを更に進化させて斜めのノイズを加えるのはグラデーションだと辛いので、マスクを使うのが良さそう。