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
A Pen by Dev-Dipesh.
Raw
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>
Raw
South-Downs.markdown
Raw
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%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment