DEV Community

Cover image for 👾 Pure CSS Gameboy
Jorge Baumann
Jorge Baumann

Posted on

👾 Pure CSS Gameboy

Hi again!

I'm Jorge Baumann and I want to show you this handmade Nintendo Gameboy built from scratch with HTML & CSS. Animated (a little bit) by Javascript. It was my first game console. What beautiful memories! 😍

👉 Live DEMO: https://baumannzone.github.io/gameboy-css/

Gameboy

👉 Source Code:

GitHub logo baumannzone / gameboy-css

👾 Pure CSS GameBoy - Includes animations and the original sound 🔊

Video:

Let's get started!

HTML it's written in Pug (formerly known as jade) and CSS with Stylus CSS.

This is the only HTML (Pug) used:



  .gameboy
    .screen-cont
      .power
      .screen
        .header DOT MATRIX WITH STEREO SOUND
        .animated-text Nintendo
          .copy ®
    .controls-cont
      .btn-direction
        .vertical
        .horizontal
      .btn-AB
      .btn-start-select
    .speakers
    .on-off < off-on >
    .phones phones


Enter fullscreen mode Exit fullscreen mode

Check the whole file here: index.pug.
Also, here it is the CSS file (stylus): main.styl


Although the Pure CSS Gameboy is done, I wanted to add a little bit of magic so, with a little Javascript and CSS, I added animations and effects 🔮.

  • The first thing you see when you turn on the gameboy is the Nintendo word transition
  • After the transition is done, a "beep" 🔊 sound sounds (Recorded it and edited by myself with my own Gameboy) So, it's the original one 😄.
  • Last detail, it simulates the power light comes on when you "turn on" the device.
  • EXTRA ✏️: Font used is called "Pretendo" by jackster3000, a mimic nintendo-like font. The real Nintendo font is not well known.

Animation


🐷 That's all, folks!

Do you have any question? Let me know what do you think in the comments below or drop me a few words on twitter (@baumannzone).

I'm still thinking what will be my next "Pure CSS" idea, what would you like to see?

If you liked the content of this post, you should subscribe to my newly released Youtube channel: RambitoJS.

RambitoJS

Also, if you are into #vuejs, #css #javascript, #testing or some other topic related to web development, you may follow me on Github, since I'm creating open source content frequently.


If you liked this article, you should check "Pure CSS Zombie", from css-art series:


🦄 Thanks for reading, see you soon! 🥳
Say Hello! Twitter | Github | Youtube

Top comments (9)

Collapse
 
nickytonline profile image
Nick Taylor

This looks great Jorge!

Collapse
 
baumannzone profile image
Jorge Baumann

Thank you, Nick 🦄

Collapse
 
souder_arguedas profile image
Henry Souder-Arguedas

Awesome

Collapse
 
baumannzone profile image
Jorge Baumann

Hey! Thank you, already saw your twitter message. 😍

Collapse
 
bauripalash profile image
Palash Bauri 👻

That's Awesome ♥️
I wish I could play some games in it.. 😊😅

Collapse
 
baumannzone profile image
Jorge Baumann

Well.. a lot of people wanted to make it interactive and load roms or something to play gameboy 😁

Collapse
 
baumannzone profile image
Jorge Baumann

+1000 views. You guys are awesome <3

Collapse
 
diemkay profile image
Andreea Năstase

I just found this and think I might challenge myself to do something similar during this lockdown :) thanks for the inspiration!

Collapse
 
baumannzone profile image
Jorge Baumann

I would love to see what you do. Don't forget to share it