LoginSignup
8

More than 5 years have passed since last update.

CSSで海を作る。

Last updated at Posted at 2016-11-16

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 に対応

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8