(cache)CSSでビックリマンシール風の背景を作る

Chrome 69 から CSS conic-gradient が使えるようになります
※2018年8月3日時点ではバージョンが 68 なので、以下のソースは Chrome Canary でご確認ください。

今までグラデーションといえば、線形グラデーションの linear-gradient と放射状グラデーションの radial-gradient の２つだけでしたが、conic-gradient で円錐状グラデーションを表現することができます

これを利用しビックリマンシール風の背景を作成してみました。*1

実際に描画されたものを見たい場合はこちら。

名前のところは太字にして枠をつけただけなので、もう少し何とかしたいところですが、
主旨のキラキラはいい感じにできました。

キラキラソース

HTML

<div class="kirakira">
  ここに名前や画像の要素を置く
</div>

CSS

.kirakira {
  position: relative;
  width: 240px;
  height: 240px;
  text-align: center;
  background: conic-gradient(
    white 2%,
    #d9ccb7 22%,
    white 25%,
    gray 40%,
    white 50%,
    #bbcfd2 60%,
    white 80%,
    gray 96%,
    white 100%
  );
  background-size: 24px 24px;

  > * {
    position: relative;
  }

  // 台紙のカラー
  &::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background : linear-gradient(-45deg, orange, blue);
    opacity: .18;
  }
}

background: conic-gradient(...) で円錐状の背景パターンを作成し、
background-size: 24px でパターンの繰り返し。

before擬似要素の linear-gradient() で色合いを加えれば完成です。

以下、補足として conic-gradient の使い方をざくっとまとめました。

`conic-gradient` の基本的な使い方

1. 2色のグラデーション

.hoge {
  background: conic-gradient(#fff, #000);
}

グラデーションは要素の中心から時計周りに、白（#fff）から黒（#000）へ均等に分布します。

2. グラデーションカラーのスタート位置を変える

.hoge {
  background: conic-gradient(from 90deg, #fff, #000);
}

カラー指定の前に　from 〇〇deg と書くことでグラデーションカラーのスタート位置を変更することができます。 deg は角度（degree）を表わし、デフォルトの位置（0 度）から時計周りに移動します。deg の代わりに turn も使用できます。

3. グラデーションの中心位置を変更する

.hoge {
  background: conic-gradient(from 90deg at 75% 50%, #fff, #000);
}

デフォルトでは要素の中心（50% 50%）に指定されていますが、 at x位置 y位置 をカラー指定の前に置くことで中心位置を変更することができます。 from と一緒に指定する場合、from と at の間にコロンは不要です。

4. 複数色のグラデーション

.hoge {
  background: conic-gradient(red, orange, yellow, green, blue, purple, red);
}

カラーは複数指定することができます。最初と最後の色を合わせておけば、連続したカラーグラデーションを作ることができます。

5. 特定の色の分布範囲を変更する

.hoge {
  background: conic-gradient(red 180deg, orange, yellow, green, blue, purple, red);
}

任意の色に対し角度を指定することで分布範囲を変更することができる。上の例では red 180deg で赤色を 180 度まで染めるようにしています。この時残りの範囲は他の色で均等に分布されます。

*1 @grapswiz thanks

CSSでビックリマンシール風の背景を作る