gamerdonkey
/
tilde-town-website
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improving containers on vaporwave landscape.

master
gamerdonkey 2021-02-18 05:51:52 +00:00
parent 29d4c0f299
commit 888627e917
2 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
vaporwave/index.html
View File

@ -7,7 +7,7 @@
</head>
<body>
<div class="container">
<div class="landscape">
<div class="sun"></div>
<div class="stars"></div>
@ -39,7 +39,7 @@
<div class="mountain-container flipped">
<div class="mountain size200 right"></div>
<div class="mountain"></div>
<div class="mountain size200 right"></div>
<div class="mountain size200 right"></div>
<div class="mountain size200"></div>
<div class="mountain"></div>
<div class="mountain left"></div>
@ -47,11 +47,13 @@
<div class="mountain size100 left"></div>
</div>
<div class="grid blur"></div>
<div class="grid"></div>
<div class="grid">
<div class="lines glow"></div>
<div class="lines"></div>
</div>
<div class="scanlines"></div>
</div><!-- container -->
</div><!-- landscape -->
</body>
</html>

38
vaporwave/landscape.css
View File

@ -1,25 +1,30 @@
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #1a001a;
display: flex;
justify-content: space-around;
align-items: center;
justify-content: center;
background: #1a001a;
}
div.container {
div.landscape {
position: absolute;
display: block;
width: 100%;
height: 100%;
/* margin: 80px; */
max-width: 1920px;
max-height: 1080px;
min-width: 800px;
min-height: 600px;
overflow: hidden;
/* border: 2px solid magenta; */
box-shadow: 0px 0px 30px #660066; */
box-shadow: 0px 0px 30px #660066;
}
div.sun {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 335px,
@ -172,17 +177,24 @@ div.grid {
position: absolute;
height: 450px;
width: 200%;
background: linear-gradient(#222, black);
transform: translate(-25%, 370px) perspective(220px) rotateX(51deg);
}
div.grid > .lines {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(#e765dc 1px, transparent 1px 39px, #e765dc 39px),
linear-gradient(to right, #e765dc 1px, transparent 1px 39px, #e765dc 39px);
background-size: 100% 40px, 40px 100%;
transform: translate(-25%, 365px) perspective(220px) rotateX(51deg);
}
div.grid.blur {
div.grid > .lines.glow {
background: linear-gradient(#da22ca 1px, transparent 1px 39px, #da22ca 39px),
linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px), linear-gradient(#111, black);
background-size: 100% 40px, 40px 100%, 100% 100%;
filter: blur(5px);
linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px);
background-size: 100% 40px, 40px 100%;
filter: blur(4px);
}
div.scanlines {