Edited at

CSS グラデーションで 肉球を作ってみた。

More than 1 year has passed since last update.

sample.png

<div class="paws"></div>


.paws{
position: fixed;
top: 0; left: 0;

width: 100%;
height: 100%;

font-size: 2em;

color: black;

/* gradient(size, position, fromColor, toColor) */
/* 全体の幅: 3.0625em ,全体の高さ: 3.325em */
background-image:
radial-gradient(0.625em 1.25em at 0.50em 1.5em, currentColor 50%, transparent 50%),
radial-gradient(0.625em 1.25em at 1.25em 1.0em, currentColor 50%, transparent 50%),
radial-gradient(0.625em 1.25em at 2.00em 1.0em, currentColor 50%, transparent 50%),
radial-gradient(0.625em 1.25em at 2.75em 1.5em, currentColor 50%, transparent 50%),

radial-gradient(1.25em at 1.35em 2.70em, currentColor 50%, transparent 50%),
radial-gradient(1.25em at 1.60em 2.50em, currentColor 50%, transparent 50%),
radial-gradient(1.25em at 1.85em 2.70em, currentColor 50%, transparent 50%);

}


作り方

background-imageのradial-gradient()で円を作る

radial-gradientの引数左から

幅 高さ at 中心のX座標 中心のY座標, 開始色(円の中心から始まる) ,終了色

gradientを複数使う場合 gradientの区切りで,を忘れずに指定する。

1, 四つの楕円を作る(幅 < 高さの円)

radial-gradient(0.625em 1.25em at 0.50em 1.5em, currentColor 50%, transparent 50%),

radial-gradient(0.625em 1.25em at 1.25em 1.0em, currentColor 50%, transparent 50%),
radial-gradient(0.625em 1.25em at 2.00em 1.0em, currentColor 50%, transparent 50%),
radial-gradient(0.625em 1.25em at 2.75em 1.5em, currentColor 50%, transparent 50%),

2, 三つの正円を作る(幅 = 高さの円)


radial-gradient(1.25em at 1.35em 2.70em, currentColor 50%, transparent 50%),
radial-gradient(1.25em at 1.60em 2.50em, currentColor 50%, transparent 50%),
radial-gradient(1.25em at 1.85em 2.70em, currentColor 50%, transparent 50%);

幅と高さが等しい場合は 引数を省略できます。

最後のgradientには,は指定しません、代わりに;を指定します。

完成です。


background-size と background-repeat で画面全体に配置



  • 肉球全体の幅と高さを計算する


    • サンプルは 全体の幅: 3.0625em ,全体の高さ: 3.325em



  • background-sizeを指定 計算した幅と高さ分を指定する(+αで大きめに指定すると良い)


background-size: 3.5em 3.5em;


  • background-repeat で繰り返し表示

background-repeat: repeat;

sample2.png


色を変える


background-image:
radial-gradient(0.625em 1.25em at 0.50em 1.5em, pink 25%, orange 25%, orange 50% ,transparent 50%),
radial-gradient(0.625em 1.25em at 1.25em 1.0em, pink 25%, orange 25%, orange 50% ,transparent 50%),
radial-gradient(0.625em 1.25em at 2.00em 1.0em, pink 25%, orange 25%, orange 50% ,transparent 50%),
radial-gradient(0.625em 1.25em at 2.75em 1.5em, pink 25%, orange 25%, orange 50% ,transparent 50%),

radial-gradient(1.25em at 1.35em 2.70em, orange 50%, transparent 50%),
radial-gradient(1.25em at 1.60em 2.50em, orange 50%, transparent 50%),
radial-gradient(1.25em at 1.85em 2.70em, orange 50%, transparent 50%);

sample3.png

font-sizeをいじれば、肉球の大きさを変えられます。