Designing some stuff. 😊

Your ul:last-child is enough to qualify as a separate entity, consider use a dedicated class name for it

Also you disable outline for the input but that’s not gonna help, you should disable it on :focus and ALWAYS PROVIDE THE VISUAL ALTERNATIVE to make it clear that the input is focused, otherwise your ui will be trash

Also you use 0px, consider using just 0 for zero-resembling values. A zero is a zero in css no matter the unit

background: transparent for the input is wrong on so many levels. Either use background-color: transparent which I don’t recommend or use background: none. But you should probably use background-color: white in this case

At least you used pointer cursor for an interactive element (it’s better be fucking interactive) so kudos for that.

@uyouthe waouh, I was not expecting all this

Thanks a lot bro

I'll consider what you said

@uyouthe this is how i managed the focus

From an design standpoint the shadows should be way less intrusive. Make them more transparent and possibly an mix-blend-mode

Also take a lot of care on the Animation time. These kind of design elements can be quite distracting if done wrong, also check how it translates, some method are better than others

@010001111 I don't understand when you say check how it translate

It is named Red Stapler - but there is not a single red pixel on the screen.
Put a little red stapler inside the empty circle at the top.

@Oktokolo just a random text , don't care about it, I was just practicing

I like how it looks.

@N00bPancakes thanks

I steal code for a living...
Add source link here, once done!

@F1973
the original neumorphic design also is probably the easiest way to age-restrict an app to 70-.
Grandpa will only see a flat surface without any interactive elements while younger people just squint a bit and get the full UI.

@F1973 Oh man thanks for mentioning this name! I've been looking for neumorphic designs for ages but never knew what they were called!

@F1973 HCI? 😅

@Afrographics don’t use js focus.

Just do this:

Input:focus {
your different styles here
}

@Afrographics depending on how you wrote your code, it translated the color from a to b, or moves two different layers of one box-shadow definition with different color from a to b, or it just Fades pseudo elements with the different states, or you use a completely different method.

Transitions and animations aren’t just „ah we’ll see how the browser does it“

@uyouthe the problem I want to apply the style to the parent element of the input

@Afrographics I’d overthink the DOM then, sometimes there is no other way, but usually it’s a sign of bad structure

@010001111 to get that design , I need to follow that structure

@Afrographics there is focus-within

@uyouthe focus-within. 🤔. Let me Google this 🏃🏃🏃

@F1973 TIL that word, thanks.

@Z-GOD fair point but there is many valid units and there is no reason to think like “oh it’s 0px but I need to make it responsive so I shouldn’t use vw I should only use px because it already says px”

There were many hate rants for neumorphism here back when it was trendy. I thought everyone hated it.

@electrineer and what do you want me to do?