Help us understand the problem. What is going on with this article?

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

More than 3 years have 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をいじれば、肉球の大きさを変えられます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away