From 29d4c0f29919414510a093a3f8c9cee9685b310a Mon Sep 17 00:00:00 2001 From: gamerdonkey Date: Thu, 18 Feb 2021 05:30:20 +0000 Subject: [PATCH] Making some vaporwave trash CSS art. --- vaporwave/index.html | 57 ++++++++++++ vaporwave/landscape.css | 194 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 251 insertions(+) create mode 100644 vaporwave/index.html create mode 100644 vaporwave/landscape.css diff --git a/vaporwave/index.html b/vaporwave/index.html new file mode 100644 index 0000000..6bc9821 --- /dev/null +++ b/vaporwave/index.html @@ -0,0 +1,57 @@ + + + +β–‘β–’β–“β–ˆ πŸ…ΆπŸ…΄πŸ…½πŸ…΄πŸ†πŸ…ΈπŸ…² πŸ†…πŸ…°πŸ…ΏπŸ…ΎπŸ†πŸ††πŸ…°πŸ†…πŸ…΄ πŸ…»πŸ…°πŸ…½πŸ…³πŸ†‚πŸ…²πŸ…°πŸ…ΏπŸ…΄ β–ˆβ–“β–’β–‘ + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ + + diff --git a/vaporwave/landscape.css b/vaporwave/landscape.css new file mode 100644 index 0000000..86db787 --- /dev/null +++ b/vaporwave/landscape.css @@ -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; +}