Making some vaporwave trash CSS art.
parent
237c1d47f3
commit
29d4c0f299
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>░▒▓█ 🅶🅴🅽🅴🆁🅸🅲 🆅🅰🅿🅾🆁🆆🅰🆅🅴 🅻🅰🅽🅳🆂🅲🅰🅿🅴 █▓▒░</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="landscape.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="sun"></div>
|
||||
<div class="stars"></div>
|
||||
|
||||
<div class="mountain-container background">
|
||||
<div class="mountain size200"></div>
|
||||
<div class="mountain size200"></div>
|
||||
<div class="mountain size200"></div>
|
||||
<div class="mountain"></div>
|
||||
<div class="mountain size100"></div>
|
||||
</div>
|
||||
<div class="mountain-container background flipped">
|
||||
<div class="mountain size200"></div>
|
||||
<div class="mountain size200"></div>
|
||||
<div class="mountain size200"></div>
|
||||
<div class="mountain"></div>
|
||||
<div class="mountain size100"></div>
|
||||
</div>
|
||||
|
||||
<div class="mountain-container">
|
||||
<div class="mountain size200 right"></div>
|
||||
<div class="mountain"></div>
|
||||
<div class="mountain size200 right"></div>
|
||||
<div class="mountain size200"></div>
|
||||
<div class="mountain"></div>
|
||||
<div class="mountain left"></div>
|
||||
<div class="mountain size100"></div>
|
||||
<div class="mountain size100 left"></div>
|
||||
</div>
|
||||
<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"></div>
|
||||
<div class="mountain"></div>
|
||||
<div class="mountain left"></div>
|
||||
<div class="mountain size100"></div>
|
||||
<div class="mountain size100 left"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid blur"></div>
|
||||
<div class="grid"></div>
|
||||
|
||||
<div class="scanlines"></div>
|
||||
</div><!-- container -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #1a001a;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
div.container {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* margin: 80px; */
|
||||
overflow: hidden;
|
||||
/* border: 2px solid magenta; */
|
||||
box-shadow: 0px 0px 30px #660066; */
|
||||
}
|
||||
|
||||
div.sun {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at 50% 335px,
|
||||
transparent 150px,
|
||||
#3d1452 150px,
|
||||
#001a1a),
|
||||
linear-gradient(
|
||||
transparent 55%,
|
||||
#3d1452 55% 61%,
|
||||
transparent 61% 67%,
|
||||
#3d1452 67% 73%,
|
||||
transparent 73% 79%,
|
||||
#3d1452 79% 85%,
|
||||
transparent 85% 89%,
|
||||
#3d1452 89% 93%,
|
||||
transparent 93% 96%,
|
||||
#3d1452 96% 98%,
|
||||
transparent 98%),
|
||||
radial-gradient(
|
||||
yellow,
|
||||
orangered 60%),
|
||||
linear-gradient(
|
||||
orangered 60%,
|
||||
red);
|
||||
background-position: center, 50% 187px, top center;
|
||||
background-size: 100% 100%, 300px 300px, 100% 400px;
|
||||
background-repeat: no-repeat;
|
||||
filter: blur(1px);
|
||||
}
|
||||
|
||||
div.stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at 80% 233px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 97% 77px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 85% 5px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 84% 104px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 14% 83px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 88% 20px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 51% 17px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 21% 178px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 72% 212px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 19% 94px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 22% 112px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 21% 203px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 9% 37px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 88% 95px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 8% 235px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 18% 78px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 5% 83px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 34% 162px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 82% 19px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 18% 237px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 74% 23px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 33% 159px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 46% 120px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 25% 254px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 76% 256px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 90% 183px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 20% 268px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 47% 126px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 76% 19px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 86% 125px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 40% 142px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 92% 236px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 7% 320px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 23% 44px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 97% 355px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 17% 26px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 51% 51px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 86% 274px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 37% 66px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 5% 245px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 44% 121px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 22% 156px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 43% 22px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 95% 83px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 90% 104px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 33% 97px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 12% 208px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 10% 90px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 15% 229px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 70% 117px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 52% 121px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 69% 102px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 59% 66px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 29% 74px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 26% 65px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 69% 204px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 80% 195px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 32% 151px, #705d79 1px, transparent 2px),
|
||||
radial-gradient(circle at 96% 275px, #705d79 1px, transparent 1px),
|
||||
radial-gradient(circle at 7% 160px, #705d79 1px, transparent 1px);
|
||||
}
|
||||
|
||||
div.mountain-container {
|
||||
position: absolute;
|
||||
top: 450px;
|
||||
width: 47%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div.mountain-container.flipped {
|
||||
right: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
div.mountain-container.background {
|
||||
top: 430px;
|
||||
width: 44%;
|
||||
}
|
||||
|
||||
div.mountain {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: linear-gradient(to bottom left, #00cccc, #008080);
|
||||
transform: rotate(45deg);
|
||||
border: 2px solid #ccffff;
|
||||
box-shadow: 0px 0px 15px #00ffff;
|
||||
}
|
||||
|
||||
div.mountain.size250 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
div.mountain.size200 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
div.mountain.size100 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.mountain.left {
|
||||
transform: rotate(40deg);
|
||||
}
|
||||
|
||||
div.mountain.right {
|
||||
transform: rotate(50deg);
|
||||
}
|
||||
|
||||
div.grid {
|
||||
position: absolute;
|
||||
height: 450px;
|
||||
width: 200%;
|
||||
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 {
|
||||
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);
|
||||
}
|
||||
|
||||
div.scanlines {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(transparent 1px, rgba(0, 0, 0, 0.5) 3px);
|
||||
background-size: 100% 3px;
|
||||
}
|
||||
Loading…
Reference in New Issue