14

Designing some stuff. 😊

Comments
  • 1
    Your ul:last-child is enough to qualify as a separate entity, consider use a dedicated class name for it
  • 1
    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
  • 1
    Also you use 0px, consider using just 0 for zero-resembling values. A zero is a zero in css no matter the unit
  • 1
    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
  • 0
    At least you used pointer cursor for an interactive element (it’s better be fucking interactive) so kudos for that.
  • 1
    @uyouthe waouh, I was not expecting all this

    Thanks a lot bro

    I'll consider what you said
  • 1
    @uyouthe this is how i managed the focus
  • 0
    From an design standpoint the shadows should be way less intrusive. Make them more transparent and possibly an mix-blend-mode
  • 0
    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
  • 0
    @010001111 I don't understand when you say check how it translate
  • 2
    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.
  • 1
    @Oktokolo just a random text , don't care about it, I was just practicing
  • 0
    I like how it looks.
  • 1
  • 3
    I fucking love neumorphic design.
  • 1
    I steal code for a living...
    Add source link here, once done!
  • 1
    @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.
  • 1
    @F1973 Oh man thanks for mentioning this name! I've been looking for neumorphic designs for ages but never knew what they were called!
  • 1
    @Oktokolo How?

    @Linuxxx hahah welcome bro. Even I got to know this very recently.

    I fucking love the interface and it gives a new feel to HCI
  • 1
    @F1973 HCI? 😅
  • 0
    @linuxxx Human Computer Interaction. 🤣🍔🍔🎅🏻🎸
  • 0
    @Afrographics don’t use js focus.

    Just do this:

    Input:focus {
    your different styles here
    }
  • 0
    @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“
  • 0
    @uyouthe the problem I want to apply the style to the parent element of the input
  • 0
    @Afrographics I’d overthink the DOM then, sometimes there is no other way, but usually it’s a sign of bad structure
  • 0
    @010001111 to get that design , I need to follow that structure
  • 0
    @Afrographics there is focus-within
  • 0
    @uyouthe focus-within. 🤔. Let me Google this 🏃🏃🏃
  • 1
    @uyouthe is there a real downside to unit identifiers next to 0?
    I always use them, mostly because of chrome dev tools - when you select a property value 0 and scroll to increase/decrease, it won't try to guess and autofill the unit, and will obviously result in an invalid value.
  • 1
    @F1973 TIL that word, thanks.
  • 2
    @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”
  • 1
    @N00bPancakes you too are welcome bro.
  • 0
    There were many hate rants for neumorphism here back when it was trendy. I thought everyone hated it.
  • 0
    @electrineer and what do you want me to do?
Add Comment