Skip to content

Instantly share code, notes, and snippets.

@shenhuang

shenhuang/beach.html

Created February 9, 2019 23:22
Show Gist options
  • Save shenhuang/6c4f4d0cfce2656cb4f3f4768ec883b1 to your computer and use it in GitHub Desktop.
Save shenhuang/6c4f4d0cfce2656cb4f3f4768ec883b1 to your computer and use it in GitHub Desktop.
Download ZIP
A CSS beach theme scales dynamically...
Raw
beach.html
<!--Copyright to Shen Huang, you can reach me out at [email protected]>
<!DOCTYPE html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<html>
<head>
<title>BEACH</title>
<style>
body {
background-color : #a3d2ff;
}
html, body {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
}
sand {
z-index : 0;
position : absolute;
top : 60%;
left : -10%;
width: 110%;
border-bottom : 300px solid #ffedc6;
border-left : 100px solid transparent;
}
water {
z-index : 1;
position : absolute;
top : 45%;
left : -30%;
height : 60%;
width : 100%;
background-color : #84abff;
border-radius : 50%;
}
skymask {
z-index : 2;
position : absolute;
top : 30%;
left : -10%;
height : 30%;
width : 80%;
background-color : #a3d2ff;
}
boat {
z-index : 3;
position : absolute;
top : 90%;
left : 20%;
width: 70px;
border-top : 10px solid #ffd6f9;
border-left : 5px solid transparent;
border-right : 5px solid transparent;
}
mast {
z-index : 4;
position : absolute;
top : -70px;
left : 50px;
height : 60px;
width : 5px;
background-color : #efeded;
}
sail {
z-index : 3;
position : absolute;
top : -70px;
left : 10px;
width : 5px;
border-bottom : 50px solid #ffffff;
border-left : 40px solid transparent;
}
tree {
z-index : 2;
position : absolute;
top : 55%;
left : 80%;
}
branch {
z-index : 2;
position : absolute;
top : 0px;
left : 0px;
height : 90px;
width : 40px;
border : 1px;
border-color : #7f6048;
border-style : solid;
background-color : #bc8e6b;
border-radius : 50%;
-webkit-clip-path : polygon(20px -30px, 70px 0px, 35px 80px, 10px 80px, 30px 55px);
clip-path : polygon(20px -30px, 70px 0px, 35px 80px, 10px 80px, 30px 55px);
}
leaf1 {
z-index : 2;
position : absolute;
top : -5px;
left : -55px;
height : 15px;
width : 70px;
border : 1px;
border-color : #527c51;
border-style : solid;
background-color : #6fad6b;
border-radius : 50%;
-webkit-clip-path : ellipse(40px 25px at 60px 30px);
clip-path : ellipse(40px 25px at 60px 30px);
transform : scaleX(1.2) rotate(0deg);
}
leaf2 {
z-index : 2;
position : absolute;
top : -15px;
left : -35px;
height : 15px;
width : 70px;
border : 1px;
border-color : #527c51;
border-style : solid;
background-color : #6fad6b;
border-radius : 50%;
-webkit-clip-path : ellipse(40px 15px at 60px 20px);
clip-path : ellipse(40px 15px at 60px 20px);
transform : scaleX(0.7) rotate(15deg);
}
leaf3 {
z-index : 2;
position : absolute;
top : 5px;
left : -35px;
height : 15px;
width : 70px;
border : 1px;
border-color : #527c51;
border-style : solid;
background-color : #6fad6b;
border-radius : 50%;
-webkit-clip-path : ellipse(40px 15px at 60px 20px);
clip-path : ellipse(40px 15px at 60px 20px);
transform : scaleX(0.7) rotate(-10deg);
}
leaf4 {
z-index : 2;
position : absolute;
top : -7px;
left : 30px;
height : 15px;
width : 70px;
border : 1px;
border-color : #527c51;
border-style : solid;
background-color : #6fad6b;
border-radius : 50%;
-webkit-clip-path : ellipse(40px 25px at 60px 30px);
clip-path : ellipse(40px 25px at 60px 30px);
transform : scaleX(-1.2) rotate(0deg);
}
leaf5 {
z-index : 2;
position : absolute;
top : -20px;
left : 10px;
height : 15px;
width : 70px;
border : 1px;
border-color : #527c51;
border-style : solid;
background-color : #6fad6b;
border-radius : 50%;
-webkit-clip-path : ellipse(40px 15px at 60px 20px);
clip-path : ellipse(40px 15px at 60px 20px);
transform : scaleX(-0.7) rotate(20deg);
}
leaf6 {
z-index : 2;
position : absolute;
top : 5px;
left : 15px;
height : 15px;
width : 70px;
border : 1px;
border-color : #527c51;
border-style : solid;
background-color : #6fad6b;
border-radius : 50%;
-webkit-clip-path : ellipse(40px 15px at 60px 20px);
clip-path : ellipse(40px 15px at 60px 20px);
transform : scaleX(-0.7) rotate(-10deg);
}
coconut1 {
z-index : 3;
position : absolute;
top : 1px;
left : 10px;
height : 15px;
width : 15px;
border : 1px;
border-color : #827d5d;
border-style : solid;
background-color : #a59f78;
border-radius : 50%;
}
coconut2 {
z-index : 3;
position : absolute;
top : -1px;
left : 21px;
height : 15px;
width : 15px;
border : 1px;
border-color : #827d5d;
border-style : solid;
background-color : #a59f78;
border-radius : 50%;
}
coconut3 {
z-index : 3;
position : absolute;
top : 5px;
left : 15px;
height : 15px;
width : 15px;
border : 1px;
border-color : #827d5d;
border-style : solid;
background-color : #a59f78;
border-radius : 50%;
}
</style>
</head>
<body>
<div id = "board"></div>
<sand></sand>
<water></water>
<skymask></skymask>
<boat>
<mast></mast>
<sail></sail>
</boat>
<tree>
<branch></branch>
<leaf1></leaf1>
<leaf2></leaf2>
<leaf3></leaf3>
<leaf4></leaf4>
<leaf5></leaf5>
<leaf6></leaf6>
<coconut1></coconut1>
<coconut2></coconut2>
<coconut3></coconut3>
</tree>
</body>
<script>
//JAVASCRIPT CODE GOES HERE!!!
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment