Manz

¡Zona de código creativo!

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...

Introducción

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!

Nintendo GameBoy con CSS

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

Funko Pop con CSS
Alcatel One Touch Easy con CSS

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.

Listado de trabajos creativos

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!

Creative work
Game
DatosDescripciónFechaStarsDemoLang
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 ⭐