A Pen by Dev-Dipesh.

index.html

<div class="south-downs">
  <div class="backdrop"><div id="sky"></div></div>
  <div id="sun"></div>
  <div class="clouds1">
    <div class="cloud x1"></div>
    <div class="cloud x2"></div>
    <div class="cloud x3"></div>
  </div>
  <div class="hills"></div>
  <div class="three-trees background"></div>
  <div class="three-trees background2"></div>
  <div class="land"></div>
  <div class="two-trees foreground"></div>
  <div class="two-trees foreground2"></div>
  <div class="spinnaker-tower"></div>
  <div class="brighton"></div>
  <div class="chichester"></div>
  <div class="boat xb1"></div>
  <div class="waves">
    <div class="background-waves"></div>
    <div class="foreground-waves"></div>
  </div>
</div>

South-Downs.markdown

South Downs

It's a canvas demonstrating a beautiful scenery using CSS3

A Pen by Dev-Dipesh on CodePen.

License.

style.css

.south-downs {
  overflow:hidden;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 360px;
  bottom: -10px;
  margin-top: 100px;
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/shade.png) repeat-x bottom;
}

.south-downs .backdrop {
  position: relative;
  width: 100%;
  height: 100%;
  bottom: 10px;
  background: transparent;
  background: linear-gradient(180deg,rgba(99,203,252,0),rgba(99,203,252,.7) 50%,rgba(99,203,252,.8) 60%);
}

.south-downs .clouds {
  position: absolute;
  width: 100%;
  height: 200px;
  overflow: hidden;
  top: 30px;
}

.south-downs .hills {
  position: absolute;
  width: 100%;
  height: 51px;
  top: 160px;
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/hills.png);
}

.south-downs .three-trees.background {
  position: absolute;
  width: 30px;
  height: 25px;
  top: 138px;
  left: 20%;
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/threetrees.png);
}

.south-downs .three-trees.background2 {
  position: absolute;
  width: 30px;
  height: 25px;
  top: 140px;
  left: 93%;
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/threetrees.png);
}

.south-downs .land {
  position: absolute;
  width: 100%;
  height: 139px;
  top: 211px;
  background: #70a85e;
}

.south-downs .two-trees {
  width: 66px;
  height: 80px;
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/twotreesfor.png);
}

.south-downs .two-trees.foreground {
  position: absolute;
  top: 134px;
  left: 30%;
}

.south-downs .two-trees.foreground2 {
  position: absolute;
  top: 132px;
  right: 20%;
}

.south-downs .spinnaker-tower {
  position: absolute;
  width: 89px;
  height: 215px;
  top: 40px;
  left: 60px;
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/spinnaker.png);
}

.south-downs .brighton {
  position: absolute;
  width: 165px;
  height: 135px;
  top: 130px;
  right: 100px;
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/brighton.png);
}

.south-downs .chichester {
  position: absolute;
  width: 172px;
  height: 148px;
  top: 110px;
  left: 29%;
  margin-left: -94px;
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/chichester.png);
}

.south-downs .waves {
  position: absolute;
  width: 100%;
  height: 52px;
  bottom: 0%;
  left: 0;
  overflow: hidden;
}

.south-downs .background-waves {
  position: absolute;
  width: 200%;
  height: 90%;
  bottom: 8px;
  -webkit-transform: translate3d(-60px,8px,0);
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/backwaves.png);
}

.south-downs .foreground-waves {
  position: absolute;
  width: 200%;
  height: 42px;
  bottom: 0;
  -webkit-transform: translate3d(0,0,0);
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/forwaves.png);
  -webkit-animation: foreground-waves 3s   linear infinite;
}

.south-downs .boat {
  position: absolute;
  width: 250px;
  height: 248px;
  top: 110px;
  left: 49%;
  margin-left: -94px;
  background: transparent url(http://dev-dipesh.github.io/assets/themes/twitter/images/waves/boat.png) no-repeat;
}

/*Lets start with the cloud formation rather*/

/*The container will also serve as the SKY*/

#clouds1{
  padding: 100px 0;
  /*background: #c9dbe9;
  background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
  background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
  background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);*/
}

/*Time to finalise the cloud shape*/
.cloud {
  width: 200px; height: 60px;
  background: #fff;
  
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  
  position: absolute; 
}

.cloud:before, .cloud:after {
  content: '';
  position: absolute; 
  background: #fff;
  width: 100px; height: 80px;
  position: absolute; top: -15px; left: 10px;
  
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -moz-transform: rotate(30deg);
}

.cloud:after {
  width: 120px; height: 120px;
  top: -55px; left: auto; right: 15px;
}

/*Time to animate*/
.xb1 {  
  -webkit-animation: moveboat 15s linear infinite;
  -moz-animation: moveboat 15s linear infinite;
  -o-animation: moveboat 15s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x1 {
  left: 185px;
  top: 110px;  
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.6; /*opacity proportional to the size*/
  
  /*Speed will also be proportional to the size and opacity*/
  /*More the speed. Less the time in 's' = seconds*/
  -webkit-animation: moveclouds 25s linear infinite;
  -moz-animation: moveclouds 25s linear infinite;
  -o-animation: moveclouds 25s linear infinite;
}

.x2 {
  left: 165px;
  top: 60px;
  
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  transform: scale(0.75);
  opacity: 0.75; /*opacity proportional to the size*/
  
  -webkit-animation: moveclouds 18s linear infinite;
  -moz-animation: moveclouds 18s linear infinite;
  -o-animation: moveclouds 18s linear infinite;
}

.x3 {
  left: 150px;
  top: 10px;
  
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.8; /*opacity proportional to the size*/
  
  -webkit-animation: moveclouds 20s linear infinite;
  -moz-animation: moveclouds 20s linear infinite;
  -o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
  0% {margin-left: 1000px;}
  100% {margin-left: -1000px;}
}

@-webkit-keyframes moveboat {
  0% {margin-left: -1000px;}
  100% {margin-left: 1000px;}
}
@-moz-keyframes moveboat {
  0% {margin-left: -1000px;}
  100% {margin-left: 1000px;}
}
@-o-keyframes moveboat {
  0% {margin-left: -1000px;}
  100% {margin-left: 1000px;}
}

#sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 900%; /* This must be in a factor of three */
    background-image: -webkit-linear-gradient(top, rgba(30,152,209,1) 0%, rgb(202, 229, 243) 11%, rgba(125, 185, 232, 0.82) 22%,
                                                   rgb(240, 231, 26) 33%, rgb(245, 86, 12) 44%,   rgba(197, 127, 81, 0.82) 55%,
                                                   rgba(5, 5, 5, 1) 66%,  rgb(54, 55, 56) 77%,    rgb(3, 3, 3) 100%);
    background-image: -moz-linear-gradient(top, rgba(30,152,209,1) 0%, rgb(202, 229, 243) 11%, rgba(125, 185, 232, 0.82) 22%,
                                                rgb(240, 231, 26) 33%, rgb(245, 86, 12) 44%,   rgba(197, 127, 81, 0.82) 55%,
                                                rgba(5, 5, 5, 1) 66%,  rgb(54, 55, 56) 77%,    rgb(3, 3, 3) 100%);
    -webkit-animation-name: changeSkyColor; /* Change Shiny Sky to evening sky and to darkness */  /* Safari and Chrome */
    -webkit-animation-duration: 14s; /* Total time of animation */
    -webkit-animation-timing-function: linear; /* Just another timing function */
    -webkit-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
    -webkit-animation-direction: alternate; /* Lets do in alternate fashion */
    -moz-animation-name: changeSkyColor; /* Change Shiny Sky to evening sky and to darkness */  /* Mozzilla */
    -moz-animation-duration: 14s; /* Total time of animation */
    -moz-animation-timing-function: linear; /* Just another timing function */
    -moz-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
    -moz-animation-direction: alternate; /* Lets do in alternate fashion */
}

@-webkit-keyframes changeSkyColor /* Safari and Chrome */
{
    0%{
        top: 0px;
    }
    100% {
        top: -800%; /* #sky's height - 100% */
    }
}
@-moz-keyframes changeSkyColor /* Mozilla */
{

    0%{
        top: 0px;
    }
    100%  {
        top: -800%; /* #sky's height - 100% */
    }
}
li {
    list-style-type: none;/*Eliminating all pointers */
}
#sun{
    position:absolute; /* So you can use for animation */
    width:150px; /* Width of sun */
    height:150px; /* Height of sun */
    border-radius:100px; /* So it will be as circle */
    /*z-index:3; /* So sun is little above sky :) */
    left:50%; /* Position of Sun in screen */
    -webkit-animation-name: changeSunColor; /* Change Shiny Sun to evening sun and to a moon */  /* Safari and Chrome */
    -webkit-animation-duration: 14s; /* Total time of animation */
    -webkit-animation-timing-function: linear; /* Just another timing function */
    -webkit-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
    -webkit-animation-direction: alternate; /* Lets do in alternate fashion */
    -moz-animation-name: changeSunColor; /* Change Shiny Sun to evening sun and to a moon */  /* Mozzilla */
    -moz-animation-duration: 14s; /* Total time of animation */
    -moz-animation-timing-function: linear; /* Just another timing function */
    -moz-animation-iteration-count: infinite; /* Lets repeat sunrise and sunset till world ends :) */
    -moz-animation-direction: alternate; /* Lets do in alternate fashion */
}   
@-webkit-keyframes changeSunColor /* Safari and Chrome */
{

    0%{
        -webkit-box-shadow: inset 2px 2px 12px 3px yellow,2px 2px 15px 15px yellow; /* For sun rays effect */
        background-color:white; /* Color of sun */
        top:2%;
    }
    33%  {
        background-color: orangered; /* Color of sun */
        top:56%; 
        -webkit-box-shadow: inset 1px 1px 15px 5px rgba(255, 255, 0, 0.59),1px 1px 15px 5px yellow; /* For sun rays effect */
    }
    66%  {
        background-color: white; /* Color of sun */
        top:96%; 
        -webkit-box-shadow: inset 1px 1px 15px 5px white,1px 1px 15px 5px white; /* For sun rays effect */
    }
    100% {
        -webkit-box-shadow: inset 2px 2px 12px 3px white,2px 2px 15px 15px white; /* For Moon rays effect */
        background-color:white; /* Color of sun */
        top:32%;
    }
}
@-moz-keyframes changeSunColor /* Mozzilla */
{

    0%{
        -moz-box-shadow: inset 2px 2px 12px 3px yellow,2px 2px 15px 15px yellow; /* For sun rays effect */
        background-color:white; /* Color of sun */
        top:2%;
    }
    33%  {
        background-color: orangered; /* Color of sun */
        top:56%; 
        -moz-box-shadow: inset 1px 1px 15px 5px rgba(255, 255, 0, 0.59),1px 1px 15px 5px yellow; /* For sun rays effect */
    }
    66%  {
        background-color: white; /* Color of sun */
        top:96%; 
        -moz-box-shadow: inset 1px 1px 15px 5px white,1px 1px 15px 5px white; /* For sun rays effect */
    }
    100% {
        -moz-box-shadow: inset 2px 2px 12px 3px white,2px 2px 15px 15px white; /* For Moon rays effect */
        background-color:white; /* Color of sun */
        top:32%;
    }
}