A MANZ.DEV PRODUCTION
Directed by
Manz
Starring
Manz.dev
Music
Neon Lights
VHS Effects
<canvas>
Executive Producer
The Chat
Built with
0 lines of React
TailwindCSS avoided by
The Duck
Responsive support
¯\_(ツ)_/¯
Floating-Point Precision
0.30000000000000004
Ban Hammer by
Felixicaza
Production Deployments
On friday
Node Modules size
14.7TB
Monthly DHardy bans
234
Legacy Code
Protected by Ancient seniors
It doesn't work today
No one knows why
It worked yesterday
No one knows why
It worked today
No one knows why
Versioning control
final_v2_FINAL_really_final.tar.gz
npm packages ignored
47.382
Math Coprocessor tests...
114%/100% completed
AI hallucinations reviewed by
A tired human
SSL Certificates
expired yesterday
UTF-8 Bugs
¡Olé!
Rubber Duck
Employee of the Month
Memory leaks count
trying rembember...
17 misconceptions corrected today by
The Hypertext Guardian
Merge conflicts
resolved with violence
Kitty 127.0.0.1 host
lolcathost
CSS Centering by
A Backend developer
Internet Explorer support
Mmmmmm... nope
Single source of truth
Currently, there are 4
Dark-to-Light Mode casualties
42
Lines written by Claude
0 lines
The Hypertext Guardian will return...
...probably because someone just said HTML is a programming language.
Thanks for watching!
Remember follow me on social networks!

It's a game-changer
En esta sección podrás observar zonas de código creativo: ilustraciones o diseños hechos con CSS, canvas, SVG, etc...
Si te gusta la programación y te despierta el interés el diseño o eres una persona creativa, probablemente te guste esta sección. En ella vamos a mostrar algunos ejemplos del código creativo. Se trata de una forma de expresión a través del código donde puedes crear casi cualquier cosa. ¡Veamos algunos ejemplos!

Esto que ves aquí no es una ilustración o una imagen, es código CSS. Se trata de una Nintendo GAMEBOY™ creada a partir de código.
La idea es replicar un concepto existente en el mundo real utilizando sólo y expresamente código como reto. A través de elementos básicos como colores, sombras, formas, tipografías, bordes, gradientes, etc. vamos reproduciendo el elemento hasta hacerlo lo más realista posible.
¿No te lo crees? Echa un vistazo aquí: Nintendo GAMEBOY CSS. ¡También tenemos un cartucho de GameBoy con CSS!
¡En CSS también puedes hacer 3D! Creas cada capa por separado, y luego la transformas en 3D: moviendo ejes, rotando o escalando. Esta caja de Punko FOP la creamos escribiendo código... ¡Sin usar ninguna imagen! El personaje está hecho con una técnica de Pixel art con CSS.
Por aquí puedes ver como quedó, ¡incluso con animaciones! Punko FOP


Nuevamente, no es una imagen, es un teléfono Alcatel One Touch Easy diseñado íntegramente con CSS.
Utilizando HTML y las diferentes propiedades CSS, se le puede dar forma y conseguir un aspecto visual muy similar al popular teléfono del final de los 90. Además, con un poco de Javascript le hemos añadido funcionalidad y puedes interactuar con él o escuchar sus característicos tonos.
Utilizamos algunos iconos SVG para la pantalla y una imagen para la textura de la parte verde/turquesa.
Si quieres verlo o examinar su código en el repositorio de GitHub, echa un vistazo aquí: Alcatel One Touch Easy.
A continuación, un listado con todos los trabajos que hemos hecho haciendo en los diferentes directos de Twitch. Si te gusta especialmente alguno, ¡no te olvides de darle una estrellita en GitHub!
| Datos | Descripción | Fecha | Stars | Demo | Lang |
|---|---|---|---|---|---|
| awesome-css-art | Design with CSS code, without images! awesomecsscss-arthtmljavascriptwebcomponents | 93 ⭐ | |||
| gameboycss | A Visual Nintendo GameBoy using HTML, CSS, Javascript & WebComponents 👾 (old version) csscss-artgameboyinteractivejavascriptwebcomponents | 54 ⭐ | |||
| twitch-gameboy-css | Realistic GameBoy console with CSS / WebComponents csscss-artgameboyhtmljavascriptwebcomponents | 33 ⭐ | |||
| gallinerica | Gallinérica: ¡Gallinifica tus pollos! cssgamejamjavascriptnumericawebapp | 28 ⭐ | |||
| twitch-matrix-canvas | Matrix effect with canvas (Javascript) canvascss-artfunjavascriptmatrixobsoverlay | 23 ⭐ | |||
| codevember2017 | 30 days, 30 creative experiments. Created by Manz. challengecodepencodevembercsscss-arthtmljavascript | 21 ⭐ | |||
| twitch-powerpuffgirls | The PowerPuff Girls with CSS csscss-artfungirlsjavascriptpowerpuffgirlswebcomponents | 20 ⭐ | |||
| twitch-casio | Twitch: Casio F-91W with Pure CSS! casiocsscss-artf-91wfunretro | 20 ⭐ | |||
| twitch-solar-system | Cute Solar System with CSS csscss-artcutejavascript | 19 ⭐ | |||
| twitch-punko-fop | Punko Fop: Twitch Code Streamer 3D Box (Limited edition) 3dcsscss-artfunfunkojavascripttwitchwebcomponents | 17 ⭐ | |||
| twitch-nintendo-game-watch-css | A Nintendo Game & Watch console with Pure CSS (without images), created on live stream 🎙 ManzDev csscss-artgame-and-watchjavascriptnintendowebcomponents | 16 ⭐ | |||
| twitch-r2d2 | R2D2 (Star Wars) with Pure CSS csscss-artfunhtmlr2d2starwars | 13 ⭐ | |||
| scandisk-2.0 | Visual Demo of Microsoft Scandisk for MS-DOS implemented with LitElement (WebComponents) csscss-artfunjavascriptmsdosretroscandiskwebcomponents | 13 ⭐ | |||
| twitch-msn-messenger | MSN Messenger Window Visual Demo created with WebComponents (includes Nudge! no need batteries) csscss-artjavascriptmsn-messengerwebcomponents | 12 ⭐ | |||
| regex-people | A regular expression learning game expressiongamehtml5patternregexregexpregular | 9 ⭐ | |||
| twitch-alchemy-frontend | Alchemy fungamejavascript | 8 ⭐ | |||
| twitch-cover-dev | Developer covers (html, css, javascript, terminal) coverscsscss-artfunjavascriptlinuxretro | 8 ⭐ | |||
| twitch-chessmanzter-2022 | Chess game with Javascript ajedrezchesschessmanztercss-arttwitch | 7 ⭐ | |||
| twitch-weather-city | Weather city card with canvas (Javascript) cardcitycss-artfunjavascriptrainweather | 7 ⭐ | |||
| twitch-newspaper | Twitch Newspaper CSS/JS for streams csscss-artfunjavascripttwitchwebcomponents | 7 ⭐ | |||
| twitch-robotnik | Dr. Robotnik (Sonic, SEGA) with Pure CSS csscss-artfunrobotniksonic | 7 ⭐ | |||
| twitch-television | Old Television with CSS csscss-arttelevisiontvyoutube | 7 ⭐ | |||
| twitch-crt-monitor | CRT Monitor with Pure CSS crtcsscss-artfunjavascriptjsmonitor | 7 ⭐ | |||
| twitch-casio-pt1 | Casio PT-1 with HTML/CSS/Javascript casiocsscss-artjavascriptmusicpiano | 7 ⭐ | |||
| twitch-cinema | A Twitch cinema with Pure CSS csscss-artinteractivejavascripttwitch | 6 ⭐ | |||
| twitch-gameboy-cartridge | Nintendo GameBoy Cartridge with CSS / WebComponents cartridgecsscss-artfungameboynintendowebcomponents | 6 ⭐ | |||
| twitch-alcatel-one-touch-easy | Alcatel One Touch Easy with CSS / Javascript (without images) alcatelcsscss-artfunjavascriptone-touch-easy | 6 ⭐ | |||
| twitch-nintendo-nes | NaNtendo: A visual Nintendo NES console with pure HTML/CSS/Javascript (WebComponents) csscss-artfunjavascriptnintendowebcomponents | 6 ⭐ | |||
| twitch-zx-spectrum | ZX Spectrum with Pure CSS csscss-artjavascriptkeyboardoldspectrumzx-spectrum | 6 ⭐ | |||
| mspaint-webcomponents | Visual Demo of Microsoft Paint for Windows 95 implemented with WebComponents (HTML+CSS+Javascript) csscss-artfunjavascriptmicrosoftmspaintpaintwebcomponents | 6 ⭐ | |||
| twitch-wordle | Wordle with Javascript vanilla cssgamejavascriptwordle | 5 ⭐ | |||
| twitch-delorean-css | DeLorean (Back to the Future) with Pure CSS back-to-the-futurecsscss-artdeloreanfun | 5 ⭐ | |||
| twitch-buzz-lightyear | Buzz Lightyear design with CSS (and WebComponents for encapsulate) buzz-lightyearcsscss-artdisneyfuntoy-story | 5 ⭐ | |||
| twitch-nokia3310 | Nokia 3310 with Pure CSS csscss-artfunnokianokia-3310 | 5 ⭐ | |||
| twitch-casio-fx39 | Casio fx-39 with pure CSS calccalculatorcasiocsscss-artfun | 5 ⭐ | |||
| twitch-manzdev-bios | Twitch ManzDev BIOS POST scene csscss-artfunjavascriptobsoverlay | 5 ⭐ | |||
| twitch-megadrive-genesis | SEGA MegaDrive (Sega Genesis) with CSS csscss-artfungenesisjavascriptmegadrivesegawebcomponents | 4 ⭐ | |||
| twitch-ovni | OVNI with Pure CSS csscss-artfunovni | 4 ⭐ | |||
| twitch-phaser-monkey-island | A basic sample with Phaser: Monkey Island fungameislandjavascriptmonkeyphaser | 4 ⭐ | |||
| twitch-companion-cube | Companion Cube (Portal) with Pure CSS companioncsscss-artcubefunportal | 4 ⭐ | |||
| twitch-tv | A Twitch Television with CSS / Javascript with Dev Channels! channelscsscss-artfunjavascripttelevisiontvtwitch | 4 ⭐ | |||
| twitch-tars | TARS (Interstellar) with Javascript (WebComponents) & HTML/CSS csscss-arthtmlinterstellarjavascripttarswebcomponents | 4 ⭐ | |||
| coffindance | Coffin Dance pixel art! ⚰️👨🏿👨🏿👨🏿👨🏿 artastronomiacoffincss-artdancefunjavascriptjokepixel | 4 ⭐ | |||
| javagotchi | Javagotchi: Javascript tamagotchi clone csscss-artjavagotchijavascripttamagotchi | 4 ⭐ | |||
| twitch-canvas-stars | Canvas constellations experiment canvascss-artexperimentsjavascript | 3 ⭐ | |||
| streamer-fighter | Opening screen of Twitch Streamer Fighter gamejavascriptphasertwitch | 3 ⭐ | |||
| progress-bar | Progress Bar effect csscss-artjavascript | 3 ⭐ | |||
| twitch-pixel-city | Simple pixel city map creator gamejavascriptmap-generatorpixel-art | 3 ⭐ | |||
| twitch-esp32-css | A ESP32 Card with Pure CSS csscss-artesp32 | 3 ⭐ | |||
| twitch-claw-machine | A Claw machine with Pure CSS and Javascript csscss-artinteractivejavascript | 3 ⭐ | |||
| twitch-after-dark | Flying toasters (with Javascript + CSS) csscss-artflyingflying-toastersflying-toiletjavascriptjstoastertoilet | 3 ⭐ | |||
| twitch-face-generator | WebComponents Face Generator csscss-artfacegeneratorjavascript | 3 ⭐ | |||
| twitch-retrocube | Retrocube with pure CSS 3dcsscss-artcubefunjavascriptretrocube | 3 ⭐ | |||
| twitch-gordon-freeman | Gordon Freeman (Half-life) with Pure CSS csscss-artfreemanfungordonhalf-lifehalflifevalvevideogames | 3 ⭐ | |||
| twitch-win95 | Windows 95 UI with plain Javascript & native WebComponents csscss-artjavascriptuiwebcomponents | 3 ⭐ | |||
| twitch-millennium-falcon | Millennium Falcon (Star Wars) with Pure CSS csscss-artfalconjavascriptmillenniumpurestarwars | 3 ⭐ | |||
| twitch-tamagotchi | Twitch: Tamagotchi with Pure CSS csscss-artjavascriptpetpure-csstamagotchivirtual | 3 ⭐ | |||
| twitch-wall-e-eve | Twitch: Wall-e & Eve with Pure CSS animationcsscss-artevetwitchwall-e | 3 ⭐ | |||
| twitch-winamp2 | Twitch: Winamp2 with WebComponents (Javascript + HTML + CSS) csscss-artfunjavascriptvisualwinamp | 3 ⭐ | |||
| manztermind | Simple game for learning JS cssgamejavascript | 3 ⭐ | |||
| twitch-snowman-ball | Snowman ball with Pure CSS csscss-artinteractivejavascriptwebcomponents | 2 ⭐ | |||
| homer-meme-css | Homer meme with Pure CSS csscss-arthomer-simpson | 2 ⭐ | |||
| pasavocablo | PasaVocablo overlay game gamejavascriptobsoverlaypasapalabravue | 2 ⭐ | |||
| twitch-subcard | Twitch Subscription Card csscss-artjavascriptsubcardtwitch | 2 ⭐ | |||
| twitch-music-pentagram | A basic Music Pentagram Editor with Javascript csscss-artfunjavascriptmusicwebcomponents | 2 ⭐ | |||
| twitch-stormbreaker | Thor Stormbreaker: A enchanted Axe of Dwarvian manufacture with Pure CSS csscss-artfunhammerstormbreakerthor | 2 ⭐ | |||
| twitch-memecard | A MemeCard component for Manz.dev csscss-artjavascriptuiwebcomponents | 2 ⭐ | |||
| twitch-css-card | Poker CSS Cards (2021 twitch edition) cardscsscss-artflexfungridpokerpoker-game | 2 ⭐ | |||
| twitch-scandisk | Visual Demo of Microsoft Scandisk for MS-DOS implemented with Lit (WebComponents) csscss-artinteractivejavascriptmicrosoftmsdosscandiskwebcomponents | 2 ⭐ | |||
| twitch-squid-game | Squid game: Soldiers with Pure CSS calamarcsscss-artfungamejuegosoldiersquid | 2 ⭐ | |||
| twitch-psx | PlayStation (PSX) with HTML/CSS/Javascript csscss-artcutefunhtmljavascriptplayplaystationpsx | 2 ⭐ | |||
| twitch-glados-potato | GLaDOS potato (Portal) with Pure CSS (and JS for voice) csscss-artfungladosjavascriptportalpotato | 2 ⭐ | |||
| twitch-chessmanzter | Chess Board with Pure CSS (without images) and WebComponents chesschessboardchessmastercsscss-artfun | 2 ⭐ | |||
| twitch-lightsaber | Twitch: Lightsaber with pure CSS csscss-arthtmljavascriptlightsaberstarwars | 2 ⭐ | |||
| twitch-at-at | Twitch: AT-AT Imperial Walker with Pure CSS csscss-artfunimperial-walkerjavascriptstarwars | 2 ⭐ | |||
| twitch-diskette | Twitch: Diskette 3½ with CSS csscss-arthtmljavascriptretro | 2 ⭐ | |||
| twitch-gastly | Twitch: Gastly (Pokemon) with CSS csscss-arthtmljavascriptpokemon | 2 ⭐ | |||
| gameboy-css-ai | Nintendo GameBoy CSS with AI LLM chats aicsscss-artexperimentsgameboyllm | 1 ⭐ | |||
| twitch-defrag.exe | Windows Defrag.exe with Javascript/CSS csscss-artexperimentsfunjavascriptjoke | 1 ⭐ | |||
| twitch-charging-animation | CSS Charging animation experiments csscss-artexperiments | 1 ⭐ | |||
| twitch-typewriter-css | Typewriter with Pure CSS/Javascript csscss-artjavascripttypewriter | 1 ⭐ | |||
| twitch-halloween-2023 | Haunted Manzion CSS (2023) csscss-artjavascriptsvgwebcomponents | 1 ⭐ | |||
| twitch-doom-easter-egg | Doom Easter Egg (LenguajeJS.com) csscss-artdoomexperimentsfunjavascriptjoke | 1 ⭐ | |||
| twitch-manz9000-obs | Manz9000 (Interfaz del Bot IA con ChatGPT) aicsscss-artexperimentsjavascriptwebcomponents | 1 ⭐ | |||
| twitch-nintendo-switch | Nintendo Switch with Pure CSS/Javascript csscss-artjavascriptwebcomponents | 1 ⭐ | |||
| twitch-clippy | Clippy with CSS, Javascript and a little SVG clippycsscss-artjavascriptsvg | 1 ⭐ | |||
| twitch-ruleta | La ruleta: ¡Algo habrás hecho! csscss-artfunjavascriptruletawheel | 1 ⭐ | |||
| twitch-keydrummer | Keyboard Drummer! csscss-artdrumsjavascriptkeyboardmusic | 1 ⭐ | |||
| twitch-psp | PSP (made with CSS) csscss-artpspsony | 1 ⭐ | |||
| twitch-rip-internet-explorer | Internet Explorer R.I.P. csscss-artinternet-explorerrip | 1 ⭐ | |||
| twitch-doom | Doom UI with Javascript / CSS csscss-artdoominterfacejavascriptui | 1 ⭐ | |||
| twitch-mortal-kombat | Mortal Kombat Choose your destiny Scene with Twitch API csscss-artfunjavascriptkombatmortalscenetwitch | 1 ⭐ | |||
| twitch-pcfutbol | PCFutbol User Interface with WebComponents csscss-artpcfutboluiuser-interfacewebcomponents | 1 ⭐ | |||
| twitch-keyboard | Twitch: Keyboard with Pure CSS csscss-artjavascriptkeyboard | 1 ⭐ | |||
| twitch-gengar | Twitch: Gengar (Pokemon) with CSS csscss-artgengarpokemon | 1 ⭐ | |||
| twitch-dalek | Twitch: Dalek (Doctor Who) with CSS csscss-artdalekdoctor-who | 1 ⭐ | |||
| codevember2018 | 30 days, 30 creative experiments. Created by Manz. csscss-artjavascript | 1 ⭐ | |||
| IHE-retromadrid-2014 | Innocent Hill Engine (Retromadrid, 2014) conversationalenginegameretroslidestalks | 1 ⭐ | |||
| twitch-radiocassette | RadioCassette with CSS cassettecsscss-artradioradiocassette | 0 ⭐ | |||
| twitch-xmas-2021 | Twitch Xmas Tree csscss-artfunmanzdevtreetwitchxmas | 0 ⭐ | |||
| twitch-halloween-2021 | Halloween Twitch 2021 Edition csscss-arthalloween | 0 ⭐ | |||
| twitch-testcard | TV Testcard (Carta de ajuste) with Pure CSS csscss-artfuntest-cardtv | 0 ⭐ | |||
| twitch-cassette | Twitch: Sony Cassette with Pure CSS cassettecsscss-artfunretro | 0 ⭐ | |||
| twitch-turret-component | Twitch: Turret (Portal) with WebComponents csscss-artjavascriptwebcomponents | 0 ⭐ | |||
| twitch-turret | Twitch: Turret (Portal 2) with Pure CSS csscss-artfunportalturret | 0 ⭐ | |||
| twitch-noface | Twitch: Noface, Bo Mouse and Yubaba bird (El viaje de Chihiro, Spirited Away) with pure CSS chihirocsscss-artfunnoface | 0 ⭐ | |||
| twitch-wall-e | Twitch: Wall-e with CSS csscss-artwall-e | 0 ⭐ | |||
| twitch-thisisfine | Twitch: This is fine (meme) with CSS codecsscss-artlive-codingmemestreamingthis-is-fine | 0 ⭐ | |||
| twitch-pikachu | Twitch: Pikachu with CSS csscss-artpikachupokemon | 0 ⭐ | |||
| twitch-rickymorty | Twitch: Rick & Morty with CSS csscss-artrick-and-morty | 0 ⭐ | |||
| twitch-browsersrun | Twitch: BrowsersRun race! csscss-artfunjavascript | 0 ⭐ | |||
| twitch-haunter | Twitch: Haunter (Pokemon) with CSS csscss-arthaunterpokemon | 0 ⭐ | |||
| twitch-fry | Twitch: Fry (Futurama) with CSS csscss-artfryfuturama | 0 ⭐ | |||
| twitch-goku | Twitch: Goku (Dragon Ball) with CSS csscss-artdragon-ballgoku | 0 ⭐ | |||
| twitch-peter-griffin | Twitch: Peter Griffin CSS csscss-artfamily-guypeter-griffin | 0 ⭐ | |||
| twitch-bill-cypher | Twitch: Bill Cypher con CSS bill-cyphercsscss-artgravity-falls | 0 ⭐ | |||
| twitch-bender | Twitch: Bender (Futurama) en CSS bendercsscss-artfuturamahtml | 0 ⭐ | |||
| demo-browser | Twitch Demo: BrowserChar csscss-artinternet-explorerjavascript | 0 ⭐ | |||
| vhs-t120 | VHS T120 csscss-artvhswebcomponents | 0 ⭐ |