Skip to content

Instantly share code, notes, and snippets.

@Dev-Dipesh

Dev-Dipesh/South-Downs.markdown

Created September 3, 2013 01:53
Show Gist options
  • Save Dev-Dipesh/6418920 to your computer and use it in GitHub Desktop.
Save Dev-Dipesh/6418920 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Dev-Dipesh created this gist Sep 3, 2013.
    7 changes: 7 additions & 0 deletions South-Downs.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    South Downs
    -----------
    It's a canvas demonstrating a beautiful scenery using CSS3

    A [Pen](http://codepen.io/Dev-Dipesh/pen/aeqxb) by [Dev-Dipesh](http://codepen.io/Dev-Dipesh) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/Dev-Dipesh/pen/aeqxb/license).
    23 changes: 23 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <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>
    380 changes: 380 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,380 @@
    .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%;
    }
    }