DEV Community

loading...
Cover image for 🎹🎶 I drew a vintage keyboard using only HTML & CSS

🎹🎶 I drew a vintage keyboard using only HTML & CSS

Sarah
(they/them). Technologist + designer. Interested in ethics, accessibility, inclusivity and AI/ML. Often having fun with css.
・1 min read

I've been making drawings like this on a semi-regular basis, it's incredibly fun and relaxing. When I came across an image of this old Casio keyboard, I just knew I had to draw it as well.

You can check out all my drawings on CodePen or GitHub.

Discussion (26)

Collapse
mikepijn profile image
Michael Pijnenburg

I was just reading dev.to/parkersoftware/is-programmi...

This solves the question

Collapse
carlosrayon profile image
Carlos Rayón Álvarez

Whooouuuu!!!! 👏👏👏👏👏👍👍👍

Collapse
twoshedsjackson profile image
Paul Williamson

Incredible!

Collapse
skribascode profile image
Jeremy

Very good job !

Collapse
fossheim profile image
Sarah Author

Thank you!

Collapse
titonobre profile image
Tito

Excelent work!
I had a Casio PT-20 some 30 year ago.

Is your work protected by some type of license? I would like to try to make it interactive and play some sounds.

Collapse
injamul profile image
Syed Injamul

awsome

Collapse
fossheim profile image
Sarah Author

Thanks 😊

Collapse
georgedoescode profile image
George Francis

Ah sooo good!

Collapse
fossheim profile image
Sarah Author

Thank you!

Collapse
mvoloskov profile image
Miloslav 🏳️‍🌈 🦋 Voloskov

That shadows are flawless.

Collapse
mightytechno profile image
Mighty

You have a great skill. Cool one.

Collapse
fossheim profile image
Sarah Author

Thanks!

Collapse
dana94 profile image
Dana Ottaviani

This looks really cool!

Collapse
devindford profile image
Devin Ford

This came out amazing!

Collapse
ltsharma profile image
Lakshmeesha

Wow!, thats amazing... So HTML & CSS is the future if graphic designing too....

Collapse
guzcode profile image
Juan Camilo Guzman

Wow

Collapse
ankityadav33 profile image
Ankit Yadav

This looks as realistic as a photograph. Great Job.

Collapse
fossheim profile image
Sarah Author

Thank you ✨

Collapse
saswatamcode profile image
Saswata Mukherjee

This looks so cool!

Collapse
fossheim profile image
Sarah Author

Thanks!

Collapse
owarup profile image
owarup

It's so amazing.
I'll try to replicate it to practice.

Collapse
fossheim profile image
Sarah Author

Thanks! Would love to see your result when you're finished ✨

Collapse
andrewharpin profile image
Andrew Harpin

I had one as a kid

Collapse
oanaom profile image
Oana Munteanu

This looks so real! 😮👏

Collapse
fossheim profile image
Sarah Author

Thank you 🙌