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="sea"></div>
.sea{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;

  --waveSize: 6.5em;
  --waveColor1: blue;
  --waveColor2: dodgerblue;

  background: 
    radial-gradient(circle at 50% calc(100% - var(--waveSize)), 
      transparent 50%, var(--waveColor1) 50%) left 102% / var(--waveSize) var(--waveSize) repeat-x,
    radial-gradient(circle at 50% 10%, 
      transparent 50%, var(--waveColor2) 50%) center bottom / var(--waveSize) var(--waveSize) repeat-x,

    linear-gradient(to bottom, midnightblue, dodgerblue, lightblue);

  background-attachment: fixed;
}

補足

radial-gradient()で 波を作って海を表現しています。
radial-gradient(幅 高さ at 中心のX座標 中心のY座標, 開始色, 終了色);

中心のY座標を調節して円が半分隠れた図形を作ります。

sample2.png

radial-gradient(circle at 50% calc(100% - 96px), 
      transparent 50%, blue 50%) left 102% /96px 96px no-repeat;

図形ができたらX方向にのみ繰り返し表示します
上記のCSS末尾の no-repeatrepeat-xと書き換えてください

radial-gradient(circle at 50% calc(100% - 96px), 
      transparent 50%, blue 50%) left 102% /96px 96px repeat-x;

sample3.png

完成。

ブラウザ

Chrome と Firefox, Safariに対応

おまけ

sample4.png

<div class="sea_whale"><div>
.sea_whale{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;

  --waveSize: 6.5em;
  --waveColor1: blue;
  --waveColor2: dodgerblue;

  --whaleLength: 300px;
  --whalePosX: 25%;
  --whalePosY: 100%;
  --whaleColor: black;

  --eyeSize: 15px;
  --eyePosX: var(--whalePosX);
  --eyePosY: calc(var(--whaleLength) * 0.33);
  --eyeColor1: black;
  --eyeColor2: white;

  --tailLength1: 150px;
  --tailLength2: calc(var(--tailLength1) / 1.2);
  --tail1PosX: 30px;
  --tail2PosX: calc(var(--tail1PosX) + var(--tailLength2) / 1.815);
  --tailPosY: calc(var(--whalePosY) + var(--tailLength1) * 0.15);
  --tailColor: black;


  /* wave, whale(eye, body, tail) */
  background: 
    radial-gradient(circle at 50% calc(100% - var(--waveSize)), 
      transparent 50%, var(--waveColor1) 50%) left 102% / var(--waveSize) var(--waveSize) repeat-x,
    radial-gradient(circle at 50% 10%, 
      transparent 50%, var(--waveColor2) 50%) center bottom / var(--waveSize) var(--waveSize) repeat-x,
    /* クジラ */
    radial-gradient(100% 100% at 50% 50%, 
      var(--eyeColor1) 35%, var(--eyeColor2) 35%, var(--eyeColor2) 50%, transparent 50%)
    var(--eyePosX) calc(var(--whalePosY) - var(--eyePosY)) / var(--eyeSize) var(--eyeSize) no-repeat,

    radial-gradient(100% 100% at 50% 100%, 
      var(--whaleColor) 50%, transparent 50%) 
    var(--whalePosX) var(--whalePosY) / var(--whaleLength) var(--whaleLength) no-repeat,

    radial-gradient(circle at 25% 50%, 
      transparent 30%, var(--tailColor) 30%, var(--tailColor) 60%, transparent 60%) 
    calc(var(--whalePosX) + var(--whaleLength) + var(--tail1PosX)) var(--tailPosY) / calc(var(--tailLength1) / 1.36) var(--tailLength1) no-repeat,

    radial-gradient(circle at 75% 50%, 
      transparent 30%, var(--tailColor) 30%, var(--tailColor) 60%, transparent 60%) 
    calc(var(--whalePosX) + var(--whaleLength) + var(--tail2PosX)) var(--tailPosY) / calc(var(--tailLength2) / 1.36) var(--tailLength2) no-repeat,
    /* 空 */
    linear-gradient(to bottom, midnightblue, dodgerblue, lightblue);

   /* 背景画像(gradientも含む)位置を固定 */
   background-attachment: fixed;
}

変数を弄ればある程度の編集は可能。

ブラウザ

Chrome と Firefox に対応

Why do not you register as a user and use Qiita more conveniently?
  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