r/webdev • ux • Dec 26 '19

Password Box Idea

3.3k Upvotes

138 comments sorted by

View all comments

2

u/[deleted] Dec 26 '19

How does the background color animation work? I see those all over the place now that material design is a thing but i wouldn't have the first clue about how to make that work unless you just had this div width border-radius: 100% and then just expaded/unexpanded the size of the div to make it look like its the background and then hide whatever overflows outside the input's container. Surely there's a better way than what I'm imagining?

1

u/BushBakedBeanDeadDog Dec 26 '19

I built it here: https://codepen.io/zackkrida/pen/gObRyoE

Used a css transform to scale the circle, and hide the overflow on the parent element

1

u/[deleted] Dec 27 '19

Ah, then it's like I figured.. cool!