Discord Made The Coolest CSS Only Input Animation

[@nomadshiba]

instead of width/height/top/bottom/left/right i would prefer block/inline/start/end etc. so you can change directions easily. for example inline-size instead of width or inset-inline-start instead of left margin-block-end instead of margin-bottom. and other similar stuff.

[@treyt7914]

I disagree because those properties are much harder to read/understand

[@clevermissfox]

Have been using this kind of pattern a lot with inputs in the last year. I mostly use the input-wrapper , the input inside , then pseudo element with a bg image of the icon, or the input + button > icon . And use grid or flex on the wrapper. I love the placeholder shown pseudo class , then I use the :has(input:focus) to put the outline around the wrapper (not sure why he turned off the outline just to use a box shadow though; the outline doesn’t take up space either). If it’s an icon not a button , then I use :focus-within. Then I can animate the width of input or flex-grow on the wrapper. :has(input:focus) outline then highlights the wrapper when the input is focused but still highlight the focus ring on the button when it’s focused. Also some fun timing functions to transition that width! I love css, and all the selectors and pseudo classes we have. There are so many ways to approach the same result !! Love a css video!

[@SK-vg3mw]

Awesome! Thank you Kyle!

[@charlymarchiaro]

Very nice, I love this. If the input text is long enough, won't it be displayed behind the icon?

[@souvikmishra5323]

the full version!!

[@khaledMohamed-tp4wx]

Great video, Thanks

[@The14Some1]

13:10 i wouldn't use "has" without necessity. It's a relative new selector and there might be users who hasn't updated their browsers yet. You may use sibling selectors here: input:not(:placeholder-shown) + button>.search-icon

[@stepans2167]

:has is not as new as it used to be :)

[@The14Some1]

​@@stepans2167 Just one year has passed after it was implemented in firefox.

[@kaslmineer7999]

really cool

[@0xtz_]

😮 interesting

[@N0TZ3R0]

CSS is really crazy

[@Yamo406.x]

Sick, today I learned

[@luca.pettinato]

I like the video and modern CSS, as always Kyle is spot on! 👌🏻 Thank you!

[@clevermissfox]

What is the keyboard shortcut to hop to the end of the “word” you’re on, not the whole line ? Eg at 16:14 when he is adding the :not() and jumps the cursor to the end of ”placeholder”, then one more jump to the end of “shown”?

[@7orivorian141]

Ctrl+Left/Right Arrow to jump over a word. Holding shift will jump the word & select it.

[@DavidNelson-f4r]

Thanks for the forecast! I have a quick question: I have a SafePal wallet with USDT, and I have the seed phrase. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). What's the best way to send them to Binance?

[@vinayakporwal9885]

that descrete property is something i have never read about in last 3 years of my learning damn 😮

[@clevermissfox]

It’s fairly new and not fully supported but a good progressive enhancement ! Edit: Just got to this part of the video , I’ve always seen it as “allow-discrete”. Would have to pop onto the dev tools to see if “discrete” is valid but if so that’s great to know

[@User948Z7Z-w7n]

I just bought your course

[@WebDevSimplified]

Thank you for the support!

[@MeganovaLP]

Yayy 🤣

[@The14Some1]

The other issue is that in your current setup the input may overlap those buttons, because you forgot to adjust it's right padding.

[@kameroongod]

Proper but is the blue outline a personal choice? My discord has none.

[@MrZerosixZeroone]

wow, finaly someone discovered that you can target the focus state of an input 👏👏👏

[@Aamadmi-supporter]

Who uses plain css Talwind is used much

[@notarealperson9709]

this is only for a product that has made it. so many teams want to build this shit before the product is even successful, ultimately dooming the project contributing to the large % of software products that fail.

[@hackbaba999]

Exactly, they get lost in the sauce (aesthetics)

[@omaranbazna9066]

Can you teach us how to build real time database in css? With some machine models on top of it

[@Audulf-of-Frisia]

Why do you shake your head so much when talking?

[@jackmarrow6445]

Because he is from India

[@benjen5518]

What answer are you expecting from him?

[@potatovision]

Such a weird question... Sometimes it's okay to not act on every thought that comes into mind

[@The14Some1]

Why your avatar's triangles are crossed like that, tho?

[@SogMosee]

autism