Mountain Landscape (#cssimage, css image)

by Konstantin Rouda

HTML

<section class="canvas">

    <!--Sun-->
    <div class="sun"></div>

    <!--Mountains-->
    <div class="mountains">
      <!--Rear Mountain-->
      <div class="mountain mountain--rear"></div>
      <!--Intermediate Mountain-->
      <div class="mountain mountain--intermediate"></div>
      <!--Front Mountain-->
      <div class="mountain mountain--front"></div>
    </div>


    <!--Clouds-->
    <div class="clouds">
      <div class="cloud cloud--rear"></div>
      <div class="cloud cloud--front"></div>
    </div>


    <!--Plane-->
    <div class="plane-container">

      <div class="plane">
        <div class="plane__body"></div>
        <div class="plane__wings"></div>
        <div class="plane__stern"></div>
      </div>

    </div>

    <!--Ribbon-->
    <div class="ribbon-container">
      <div class="ribbon">
        <span>Hello World!</span>
        <div class="ribbon__tail"></div>
      </div>
    </div>

  </section>

CSS

HTML {
  font-size: 100%;
  line-height: 1.1;
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(61, 144, 183);
}

*, *::before, *::after {
  box-sizing: inherit;
  font-weight: normal;
  color: inherit;
}

.canvas {
  position: relative;
  width: 950px; min-height: 650px;
  margin: 2em auto 0;
  //background: rgba(50, 50, 50, .9);
  //background: rgb(61, 144, 183);
  //border: 1px solid #eee;
}

/*Actual Style*/

/*----------------------------
Sun
------------------------------*/
.sun {
  position: absolute;
  right: 10%;
  top: 25%;
  width: 15%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 235, 59, 0.86);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

/*----------------------------
Mountains
------------------------------*/
.mountains {
  position: absolute;
  left: 0%; bottom: 0;
  width: 100%; height: 70%;
  //border: 1px solid blue;
  overflow: hidden;
}

.mountain {
  position: absolute;
  border-radius: 0 10% 0 0;
}

.mountain--rear {
  left: 29%; bottom: -40%;
  width: 47%; height: 80%;
  background:  radial-gradient(30px 30px at 67.5% 2%, #fff 50%, transparent 53%),
    radial-gradient(30px 30px at 74% 8%, #fff 50%, transparent 53%),
    radial-gradient(30px 30px at 79.5% 14%, #fff 50%, transparent 53%),
    radial-gradient(30px 30px at 85% 20%, #fff 50%, transparent 53%),
    radial-gradient(30px 30px at 90.5% 26%, #fff 50%, transparent 53%),
    radial-gradient(30px 30px at 95.7% 31.5%, #fff 50%, transparent 53%),
    radial-gradient(30px 30px at 101% 37%, #fff 50%, transparent 53%),
    linear-gradient(to bottom left, #fff 17%, rgb(157, 215, 211) 0);
  transform: rotate(-41deg);
}

.mountain--intermediate {
  left: 10%; bottom: -52%;
  width: 50%; height: 100%;
  background:  radial-gradient(30px 30px at 72% 2%, #fff 50%, transparent 53%),
    radial-gradient(30px 30px at 77% 7%, #fff 50%, transparent 53%),
    radial-gradient(30px 30px at 82% 12%, #fff 50%,...