DEV Community

Līva Raita
Līva Raita

Posted on

A Neumorphic OP-1 in HTML and CSS

Inspired by Neumorphism, a new trend in UI design, I've coded a web version of an OP-1 synthesizer by Teenage Engineering. (Check it out in 0.5x zoom)

What do you think about the latest trend and its possible applications in the UI design?

Top comments (4)

Collapse
 
aliiim profile image
AliiiM • Edited

I guess this took a lot of work, I like it. However if you would take the same color for the white-key as the background you would get a stronger effect. Adjust the shadow a little and remove the border, then it looks more like it :)

(I just changed the style of the "white-key" class)

I made a fork out of your pen:
codepen.io/am_eu/pen/PowewPw?edito...

Collapse
 
liva_raita profile image
Līva Raita

So glad that you've played around with it! :) Looks really good!

Now that I've seen your version, I wonder if all buttons need a softer look (by removing the border and tweaking the shadows) :)

Using the light border allowed me to imitate the gloss on the edges of the buttons. But I love to see how it can look different in your work!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
liva_raita profile image
Līva Raita

Thank you, Cody!