ツナガルチップス No.9

こんにちは！！

エレクアライズ制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き今回もCSSで特定の背景パターンを作成する方法を紹介します。

前回の記事はコチラ

今回はちょっと変わった背景パターンCSSで作成します。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

例えばこんな感じ(パターン1)

パターン1のCSSプロパティはこんな感じ。

background-color: #cc6081;
background-image: radial-gradient(closest-side, transparent 98%, #ffc753 100%), radial-gradient(closest-side, transparent 98%, #ffc753 100%);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;

赤字の箇所が背景の色で、青字の箇所がマークの色です。

続いてパターン2

例えばこんな感じ(パターン2)

パターン2のCSSプロパティはこんな感じ。

background-color: #ee5e97;
background-image:
linear-gradient( 30deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient(150deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient( 30deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient(150deg, #c5b66d 12%, transparent 12.5%, transparent 87%, #c5b66d 87.5%, #c5b66d),
linear-gradient( 60deg, #f5f5f5 25%, transparent 25.5%, transparent 75%, #f5f5f5 75%, #f5f5f5),
linear-gradient( 60deg, #f5f5f5 25%, transparent 25.5%, transparent 75%, #f5f5f5 75%, #f5f5f5);
background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;
background-size: 50px 100px;