DEV Community

Cover image for I tried making this reflective UI using HTML CSS and Javascript
Naman vyas
Naman vyas

Posted on

I tried making this reflective UI using HTML CSS and Javascript

Have you ever seen a website with a reflective user interface?

Recently, I decided to take on the challenge of creating a reflective UI using only these three technologies: HTML, CSS and JavaScript. And after some experimentation and tweaking, I'm happy to share my results with you all.

Image description

you can check it out at: https://demo-gg.vercel.app/

Also it you like it please follow me on Twitter: @gitrevert

Oldest comments (9)

Collapse
 
ben profile image
Ben Halpern

Fascinating, really cool experiment.

Since I gave you camera access, could you see me testing it out from your end? J/k 😅

Collapse
 
namanvyas profile image
Naman vyas

Not now 😂, but nice idea, i will add this functionality soon

Collapse
 
namanvyas profile image
Naman vyas

😂😂, you can take my words

Collapse
 
lukeluke98 profile image
Lukeluke98

I love these programming languages.

Collapse
 
namanvyas profile image
Naman vyas

ohh man 😅, sorry, updating rn, i used HTML CSS and JavaScript only

Collapse
 
baenencalin profile image
Calin Baenen

You should change "reflective" to "transparent" or "see-through", it's only a reflection if it's from the frontfacing camera.

Anyways, neat idea; keep up the great work.

Collapse
 
namanvyas profile image
Naman vyas

It was a fun project, created in 1hour so i didn't think of it much

Collapse
 
decafdevio profile image
Bradley Ashton

Sadly it doesn’t work for me. (iPhone XS, iOS 16.3.1).

Collapse
 
clairemattockskth67 profile image
clairemattockskth67 • Edited

I think it sounds interesting and piques my curiosity. Creating a reflective interface is not an easy task that requires deep knowledge of web development and design. I read a lot about designing something reflective, I even used a reflective essay example for it. I would like to know more about the approach that was taken on this project and what difficulties arose along the way. In general, I believe that using HTML, CSS and Javascript to create a reflective interface can be successful if done correctly and with a lot of creative ideas. So I will be very glad if someone shares this with me.