├── README.md ├── casio-css.png ├── casio-css.svg ├── css-art-is-awesome.png ├── css-art-is-awesome.svg ├── funko-css.png ├── funko-css.svg ├── gameboy-css.png ├── gameboy-css.svg ├── lightsaber-css.png ├── lightsaber-css.svg ├── stormbreaker-css.png ├── stormbreaker-css.svg ├── zx-spectrum-css.png └── zx-spectrum.svg /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Awesome CSS Art

4 | Design with CSS code, without images! 5 |
6 | 7 |
8 | ManzDev en Twitch · Otras redes · Manz.dev 9 |
10 | 11 | --- 12 | 13 | ### 🕹️ Consoles 14 | - 🎮 Nintendo Gameboy CSS · [GitHub](https://github.com/ManzDev/twitch-gameboy-css) · [Demo](https://manzdev.github.io/twitch-gameboy-css) 15 | - 🎮 Nintendo Gameboy Cartridge · [GitHub](https://github.com/ManzDev/twitch-gameboy-cartridge) · [Demo](https://manzdev.github.io/twitch-gameboy-cartridge) 16 | - 🕹️ Nintendo Game & Watch · [GitHub](https://github.com/ManzDev/twitch-nintendo-game-watch-css) · [Demo](https://manzdev.github.io/twitch-nintendo-game-watch-css) 17 | - 🎮 Nintendo Switch · [GitHub](https://github.com/ManzDev/twitch-nintendo-switch) · [Demo](https://manzdev.github.io/twitch-nintendo-switch) 18 | - 🎮 Nintendo NES · [GitHub](https://github.com/ManzDev/twitch-nintendo-nes) · [Demo](https://manzdev.github.io/twitch-nintendo-nes) 19 | - 🎮 Megadrive/Sega Genesis · [GitHub](https://github.com/ManzDev/twitch-megadrive-genesis) · [Demo](https://manzdev.github.io/twitch-megadrive-genesis) 20 | - 🎮 PlayStation 1 (PSX) · [GitHub](https://github.com/ManzDev/twitch-psx) · [Demo](https://manzdev.github.io/twitch-psx) 21 | - 🎮 PlayStation Portable (PSP) · [GitHub](https://github.com/ManzDev/twitch-psp) · [Demo](https://manzdev.github.io/twitch-psp) 22 | - 🥚 Javagotchi · [GitHub](https://github.com/ManzDev/javagotchi) · [Demo](https://manzdev.github.io/javagotchi) 23 | 24 | ![GameBoy CSS](gameboy-css.png) 25 | 26 | ### 👾 Entertainment 27 | 28 | - 🤖 Punko Fop (Funko Pop Box) · [GitHub](https://github.com/ManzDev/twitch-punko-fop) · [Demo](https://manzdev.github.io/twitch-punko-fop) 29 | - 🕹️ Claw Machine · [GitHub](https://github.com/ManzDev/twitch-claw-machine) · [Demo](https://manzdev.github.io/twitch-claw-machine) 30 | - 🌌 Solar System · [GitHub](https://github.com/ManzDev/twitch-solar-system) · [Demo](https://manzdev.github.io/twitch-solar-system) 31 | 32 | ![Funko CSS](funko-css.png) 33 | 34 | ### 💾 Retro 35 | 36 | - 🎹 Casio Watch F-91W · [GitHub](https://github.com/ManzDev/twitch-casio) · [Demo](https://manzdev.github.io/twitch-casio) 37 | - 📱 Alcatel One Touch Easy · [GitHub](https://github.com/ManzDev/twitch-alcatel-one-touch-easy) · [Demo](https://manzdev.github.io/twitch-alcatel-one-touch-easy) 38 | - 💾 Diskette 3 1/2 · [GitHub](https://github.com/ManzDev/twitch-diskette) · [Demo](https://manzdev.github.io/twitch-diskette) 39 | - 🔌 ESP32 Dev Board · [GitHub](https://github.com/ManzDev/twitch-esp32-css) · [Demo](https://manzdev.github.io/twitch-esp32-css) 40 | - 💿 Tech Retro Covers · [GitHub](https://github.com/ManzDev/twitch-cover-dev) 41 | - ⌨️ Typewriter CSS · [GitHub](https://github.com/ManzDev/twitch-typewriter-css) · [Demo](https://manzdev.github.io/twitch-typewriter-css) 42 | - 💾 Music Cassette · [GitHub](https://github.com/ManzDev/twitch-cassette) · [Demo](https://manzdev.github.io/twitch-cassette) 43 | - 📎 Microsoft Clippy · [GitHub](https://github.com/ManzDev/twitch-clippy) · [Demo](https://manzdev.github.io/twitch-clippy) 44 | - 🎹 Casio PT1 Piano · [GitHub](https://github.com/ManzDev/twitch-casio-pt1) · [Demo](https://manzdev.github.io/twitch-casio-pt1) 45 | - 🎹 Casio Calculator FX39 · [GitHub](https://github.com/ManzDev/twitch-casio-fx39) · [Demo](https://manzdev.github.io/twitch-casio-fx39) 46 | - 📱 Nokia 3310 · [GitHub](https://github.com/ManzDev/twitch-nokia3310) · [Demo](https://manzdev.github.io/twitch-nokia3310) 47 | 48 | ![Casio CSS](casio-css.png) 49 | 50 | ### 📺 Devices 51 | 52 | - 📺 CRT Monitor · [GitHub](https://github.com/ManzDev/twitch-crt-monitor) · [Demo](https://manzdev.github.io/twitch-crt-monitor) 53 | - 📺 Retro TV · [GitHub](https://github.com/ManzDev/twitch-tv) · [Demo](https://manzdev.github.io/twitch-tv) 54 | - 🎮 ZX Spectrum · [GitHub](https://github.com/ManzDev/twitch-zx-spectrum) · [Demo](https://manzdev.github.io/twitch-zx-spectrum) 55 | - ⌨️ Keyboard CSS · [GitHub](https://github.com/ManzDev/twitch-keyboard) · [Demo](https://manzdev.github.io/twitch-keyboard) 56 | 57 | ![ZX Spectrum CSS](zx-spectrum.png) 58 | 59 | ### 🧙‍♂️ SciFi/Fantasy 60 | 61 | - 🚗 Delorean CSS · [GitHub](https://github.com/ManzDev/twitch-delorean-css) · [Demo](https://manzdev.github.io/twitch-delorean-css) 62 | - 🛸 Tars · [GitHub](https://github.com/ManzDev/twitch-tars) · [Demo](https://manzdev.github.io/twitch-tars) 63 | - 🛸 OVNI · [GitHub](https://github.com/ManzDev/twitch-ovni) · [Demo](https://manzdev.github.io/twitch-ovni) 64 | - 🔨 Stormbreaker · [GitHub](https://github.com/ManzDev/twitch-stormbreaker) · [Demo](https://manzdev.github.io/twitch-stormbreaker) 65 | - 🎥 Manz9000 OBS · [GitHub](https://github.com/ManzDev/twitch-manz9000-obs) · [Demo](https://manzdev.github.io/twitch-manz9000-obs) 66 | 67 | ![Stormbreaker CSS](stormbreaker-css.png) 68 | 69 | ### 🌌 StarWars 70 | 71 | - 🤖 AT-AT · [GitHub](https://github.com/ManzDev/twitch-at-at) · [Demo](https://manzdev.github.io/twitch-at-at) 72 | - 🔦 Lightsaber · [GitHub](https://github.com/ManzDev/twitch-lightsaber) · [Demo](https://manzdev.github.io/twitch-lightsaber) 73 | - 🚀 Millennium Falcon · [GitHub](https://github.com/ManzDev/twitch-millennium-falcon) · [Demo](https://manzdev.github.io/twitch-millennium-falcon) 74 | - 🤖 R2D2 · [GitHub](https://github.com/ManzDev/twitch-r2d2) · [Demo](https://manzdev.github.io/twitch-r2d2) 75 | 76 | ![Lightsaber CSS](lightsaber-css.png) 77 | 78 | ### 🤖 Robots 79 | 80 | - 🤖 GLaDOS Potato · [GitHub](https://github.com/ManzDev/twitch-glados-potato) · [Demo](https://manzdev.github.io/twitch-glados-potato) 81 | - 🔲 Companion Cube · [GitHub](https://github.com/ManzDev/twitch-companion-cube) · [Demo](https://manzdev.github.io/twitch-companion-cube) 82 | - 🎮 Turret Portal · [GitHub](https://github.com/ManzDev/twitch-turret) · [Demo](https://manzdev.github.io/twitch-turret/) 83 | - 🤖 Bender · [GitHub](https://github.com/ManzDev/twitch-bender) · [Demo](https://manzdev.github.io/twitch-bender) 84 | - 🤖 Wall-E Eve · [GitHub](https://github.com/ManzDev/twitch-wall-e-eve) · [Demo](https://manzdev.github.io/twitch-wall-e-eve) 85 | - 🤖 Robotnik · [GitHub](https://github.com/ManzDev/twitch-robotnik) · [Demo](https://manzdev.github.io/twitch-robotnik) 86 | 87 | ### 🙍‍♂️ Characters 88 | 89 | - 💥 Powerpuff Girls · [GitHub](https://github.com/ManzDev/twitch-powerpuffgirls) · [Demo](https://manzdev.github.io/twitch-powerpuffgirls) 90 | - 😶 Noface · [GitHub](https://github.com/ManzDev/twitch-noface) · [Demo](https://manzdev.github.io/twitch-noface) 91 | - 🍳 Fry · [GitHub](https://github.com/ManzDev/twitch-fry) · [Demo](https://manzdev.github.io/twitch-fry) 92 | - 💥 Goku · [GitHub](https://github.com/ManzDev/twitch-goku) · [Demo](https://manzdev.github.io/twitch-goku) 93 | - 🔮 Bill Cypher · [GitHub](https://github.com/ManzDev/twitch-bill-cypher) · [Demo](https://manzdev.github.io/twitch-bill-cypher) 94 | - 🤣 Peter Griffin · [GitHub](https://github.com/ManzDev/twitch-peter-griffin) · [Demo](https://manzdev.github.io/twitch-peter-griffin) 95 | - 🛸 Ricky Morty · [GitHub](https://github.com/ManzDev/twitch-rickymorty) · [Demo](https://manzdev.github.io/twitch-rickymorty) 96 | - 🎮 Squid Game · [GitHub](https://github.com/ManzDev/twitch-squid-game) · [Demo](https://manzdev.github.io/twitch-squid-game) 97 | - 🕶 Gordon Freeman · [GitHub](https://github.com/ManzDev/twitch-gordon-freeman) · [Demo](https://manzdev.github.io/twitch-gordon-freeman) 98 | - 🚀 Buzz Lightyear · [GitHub](https://github.com/ManzDev/twitch-buzz-lightyear) · [Demo](https://manzdev.github.io/twitch-buzz-lightyear) 99 | - 😀 Face Generator · [GitHub](https://github.com/ManzDev/twitch-face-generator) · [Demo](https://manzdev.github.io/twitch-face-generator) 100 | - 🍩 Homer CSS · [GitHub](https://github.com/ManzDev/homer-meme-css) · [Demo](https://manzdev.github.io/homer-meme-css) 101 | 102 | ### ⚡ Pokémon 103 | 104 | - 👻 Gengar · [GitHub](https://github.com/ManzDev/twitch-gengar) · [Demo](https://manzdev.github.io/twitch-gengar) 105 | - 👻 Haunter · [GitHub](https://github.com/ManzDev/twitch-haunter) · [Demo](https://manzdev.github.io/twitch-haunter) 106 | - 👻 Gastly · [GitHub](https://github.com/ManzDev/twitch-gastly) · [Demo](https://manzdev.github.io/twitch-gastly) 107 | - ⚡ Pikachu · [GitHub](https://github.com/ManzDev/twitch-pikachu) · [Demo](https://manzdev.github.io/twitch-pikachu) 108 | 109 | ### 🎇 Seasons/places 110 | 111 | - 🌦️ Weather City · [GitHub](https://github.com/ManzDev/twitch-weather-city/) · [Demo](https://manzdev.github.io/twitch-weather-city) 112 | - 🎬 Cinema · [GitHub](https://github.com/ManzDev/twitch-cinema) · [Demo](https://manzdev.github.io/twitch-cinema) 113 | - ⛄ Snowman Ball · [GitHub](https://github.com/ManzDev/twitch-snowman-ball) · [Demo](https://manzdev.github.io/twitch-snowman-ball) 114 | - 🎃 Halloween 2023 · [GitHub](https://github.com/ManzDev/twitch-halloween-2023) · [Demo](https://manzdev.github.io/twitch-halloween-2023) 115 | - 🎅 Xmas 2021 · [GitHub](https://github.com/ManzDev/twitch-xmas-2021) · [Demo](https://manzdev.github.io/twitch-xmas-2021) 116 | 117 | ### 🖥 UI 118 | 119 | - 💾 Microsoft Scandisk · [GitHub](https://github.com/ManzDev/twitch-scandisk) · [Demo](https://manzdev.github.io/twitch-scandisk) 120 | - ⚽ PC Futbol UI · [GitHub](https://github.com/ManzDev/twitch-pcfutbol) · [Demo](https://manzdev.github.io/twitch-pcfutbol) 121 | - 🌙 After Dark Screensaver · [GitHub](https://github.com/ManzDev/twitch-after-dark) · [Demo](https://manzdev.github.io/twitch-after-dark) 122 | - ⚽ CSS Futbol · [GitHub](https://github.com/ManzDev/css-futbol) · [Demo](https://manzdev.github.io/css-futbol) 123 | - 💻 Windows 95 CSS · [GitHub](https://github.com/ManzDev/twitch-win95) · [Demo](https://manzdev.github.io/twitch-win95) 124 | 125 | --- 126 | 127 | Hi! I'm Manz, 👨🏽‍💻 FullStack developer and 🥑 FrontEnd / WebPlatform standards advocate 128 | 129 | - 🧰 FullStack/Frontend Engineer / ❤️ [CSS](https://lenguajecss.com/) lover 130 | - 🎓 Teacher & Director at EOI / ex-teacher at ULL 131 | - 🎬 Partner content creator on Twitch & Youtube 132 | - 👾 Gamer & Geek (Graphic Adventures / Pixel Art) 133 | 134 | > More demos and code: [https://manz.dev/streams/](https://manz.dev/streams/) 135 | -------------------------------------------------------------------------------- /casio-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/awesome-css-art/a1b3020998f5ff10ff267bff8bad3c66a2dfc572/casio-css.png -------------------------------------------------------------------------------- /casio-css.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 105 | -------------------------------------------------------------------------------- /css-art-is-awesome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/awesome-css-art/a1b3020998f5ff10ff267bff8bad3c66a2dfc572/css-art-is-awesome.png -------------------------------------------------------------------------------- /css-art-is-awesome.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 38 | 40 | 44 | 51 | CSSIS 67 | AWESOME 79 | art 91 | 92 | 93 | -------------------------------------------------------------------------------- /funko-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/awesome-css-art/a1b3020998f5ff10ff267bff8bad3c66a2dfc572/funko-css.png -------------------------------------------------------------------------------- /gameboy-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/awesome-css-art/a1b3020998f5ff10ff267bff8bad3c66a2dfc572/gameboy-css.png -------------------------------------------------------------------------------- /lightsaber-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/awesome-css-art/a1b3020998f5ff10ff267bff8bad3c66a2dfc572/lightsaber-css.png -------------------------------------------------------------------------------- /lightsaber-css.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 99 | -------------------------------------------------------------------------------- /stormbreaker-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/awesome-css-art/a1b3020998f5ff10ff267bff8bad3c66a2dfc572/stormbreaker-css.png -------------------------------------------------------------------------------- /zx-spectrum-css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ManzDev/awesome-css-art/a1b3020998f5ff10ff267bff8bad3c66a2dfc572/zx-spectrum-css.png --------------------------------------------------------------------------------