Create direction-aware effects using modern CSS

[@KevinPowell]

So, turns out you can do this quite easily without :has()! Check out this codepen by my Discord community member mrkishi, where he has a very elegant solution: codepen.io/mrkishi/pen/mdQZMRR

[@petrlaskevic1948]

How do you make the sliding underlines of the same width as the items they're sliding below? Right now it looks a bit off, with the sliding ones being the width of the neighbor

[@user-ms8ei9le7x]

Kevin superest's )))))))

[@eioluseyi]

Wow!

[@Victor_Marius]

​@@petrlaskevic1948they (the li::after) have position absolute and width 100% and the li had position relative which makes the width 100% take effect correctly

[@Victor_Marius]

Instead of "nav li:has(+ : hover)" could use "nav:hover li:not(li:hover, li:hover ~ li)" to select all LIs before the hovered one instead of just the single one before the hovered LI. But I guess it would do the same thing as the codepen solution.

[@darkwoodmovies]

Always mind blowing what you can do with just CSS. As a developer I never really deal with the nitty gritty features of CSS anymore since everything is just built into the design system components.

[@salad_txt]

I've watched so many of your videos and I can't describe how helpful they are. This one came out just at the perfect time too!

[@clevermissfox]

The timing is crazy! I was literally looking for a viewTransition video when I got the Patreon email that a new video dropped and have a current project with a left fixed vertical nav bar. The newest video is using both ! So serendipitous! It happens all the time !

[@warguy6474]

just started trying to understand css properties. It's overwhelming but hopefully watching a ton of videos will help me know what they do

[@tyler-simoni]

So, I implemented the effect from the first video in my new portfolio site and I love it, but this is just next level! 🔥

[@ssava_ema]

Am re-watching this video over and over again till next week on Tuesday. Need to understand the secret behind the way you write your CSS

[@screamtwice]

Two years ago I did this type of effect with Javascript and an empty , man, I love how CSS has evolved! Thank you for sharing this! Very cool!

[@HenriqueErzinger]

It was VERY common in the early 2000’s, normally using jQuery at the time.

[@eioluseyi]

Wowwwww!! The ":has" selector is so powerful! I remember trying to implement this same effect before :has, I got frustrated and managed what I had. Now, :has has 👀 made the magic possible!!🎉🎉

[@Jana-ns5sg]

You really are the king of CSS aren't you? 😄 Great as always. Will have to rewatch.

[@kaustavroy6542]

Thanks Kevin for the amazing breakdown, I never thought we can use only css to do this type of stuff

[@BenAbode]

Haven't been playing around with CSS for a while now so a lot of new things here (like has).. definitely gonna give this a go - cheers for the awesome video!

[@thefarmersclan]

I subscribe to your channel on any phone I handle. Love you so much, your help comes at the right time.

[@deadlyecho]

That cleaning you've done is top notch 👌 👏

[@shaystibelman]

wow, that's actually really impressive! Has is such a game changer!

[@stevemarshall5249]

Very impressive. It prompts me to ask - have you ever done a video for producing a multi-level nav menu bar with css only? There are a few around, but I'd be very interested to see what you came up with. I've had a brief look through your past videos but haven't spotted one.

[@KevinPowell]

I think I might have a long time ago, but it's not a good idea. That's the type of thing that just needs to have JavaScript to work in all the different ways someone might interact with it.

[@stevemarshall5249]

OK that makes sense, thanks for taking the time to reply.@@KevinPowell

[@nitsanbh]

I‘ve achieved a similar effect using one additional moving div whose left/width are custom properties, set by JS on mouse events. It’s not “css only”, but it works on all major browsers, and it doesn’t have the weird issue when moving too fast between li’s

[@KevinPowell]

That's how I did the previous one I showed at the start (though it moved when an item was selected, not hovered on). I'd go that route for pushing something into production, but still a fun thing to experiment with and learn a lot from 🙂

[@unterohr]

I am blown away, this is an absolute game changer 💥

[@mannixmd]

hey firefox if you could hurry up and implement has:() that would be great ;)

[@Xeratas]

Why are you always using tags to define your navigations? I only rarely come across this. KZbin doesn't use it and i honestly can't remember when i last used a for a navigation. Just curious why you use this over something else

[@skywizard3319]

semantics

[@KevinPowell]

Because it's a list of links 🙂 YT doesn't use it for the tabs, but they're tabs so it makes sense. I explained why I used them in that video though, and unless you're making web apps with more if a menu than a navigation, lists are very much the standard practice. When the nav element came around there was some talk of dripping lists and just putting links in the nav, and you will find that in the wild, but it's generally considered best practice to use a list for accessibility reasons. I have seen an argument against it, and it's something I want to dive into more, but basically everything I've looked into has backed using a list, except for one very small case study that I've seen

[@74Gee]

I didn't know you could set a variable inside a rule! My mind is rewriting a lot of CSS now

[@Frank-mcdonaldDe]

Hi Kevin, nice short and to the point tutorials. But, why you use a calc on a padding in your nav li, instead of padding-inline-end? It has the same result

[@Frank-mcdonaldDe]

I got the answer right away....

[@maxwebstudio]

That's an amazing tips. Thank you Kevin

[@meowzhin]

I used to hate CSS because I was ignorant. Now I love it, but I'm still ignorant. :D Tailwind is awesome for doing things fast without leaving the html. It does sort of pollute the code but I'm having so much fun doing things. Your channel is also helping to understand some really hard concepts on which I was grasping to follow. Nice job!

[@PicSta]

I hope that FF will have :has pseudo-class soon. Frustrating that it's not available by default yet. Great tutorial as always.

[@RaphaelRamos-l8b]

Hi Kevin! Would you recommend creating a css with "Nested" structure or not? Because, I rarely see someone applying it. Thanks!

[@denoww9261]

Nice video! For the issue you were having with overflow:hidden and bottom: -1em, could you change overflow to overflow-x to solve this?

[@KevinPowell]

you'd end up with a scrollbar the other way, once you set an overflow in one direction, the other will switch to scroll

[@eioluseyi]

@@KevinPowell I've experienced this before. Why's that though?

[@denoww9261]

@@KevinPowell Interesting, I had no idea. Thanks!

[@gadoosher]

Just when you think you know CSS.. you see a vid that makes your head spin lmao. Going to take this to the lab bc I'm so confused rn 😅

[@nadeemr1070]

How scroll effect is working for desktop,please make a video on it too.

[@shadowcraftplayer9075]

Amazing effect!

[@HenriqueErzinger]

This effect was in every third Wordpress blog in the early 2000’s, during the jQuery days.

[@somewonderfulguy]

That's seems great, however I'm going to stick to JS solution because it doesn't animate nicely on rapid hovering between elements and changing underline position with focus-visible using keyboard - it can be done extremely fast and so it hurts animation in this solution. But nevertheless, doing things with :has is amazing!

[@CLeovison]

Hi kevin, can you recreate the navigation bar of twitter? Thankyou

[@QwDragon]

Very cool! But maybe it could be done in a better way via display: subgrid?

[@dportalesr]

Im assuming the full video is still in the works?

[@MrJettann]

Kevin thanks a lot for your work! Can you tell us please which of the new css features are ready for production? Such as layers, containers, new css units, etc, even if they have pretty good browser support, it's not really obvious what can I use now In production

[@KevinPowell]

Very dependant on your own analytics, to be honest. I feel safe using some as a progressive enhancement, like I did here with :has() where we have a perfectly fine fallback. Then I don't even need to worry about browser support. For @layers, which is above 90% now, and container queries, which is aroundd 87%, I wouldn't use them on a general, public facing page... but a personal project, might as well! or something specifically for devs... maybe I would! If you have analytics for a given project it can really help too, and usually the best thing to rely on, and then also deciding what the cutoff is for how well supported something should be.

[@rumbazumba3189]

Could this be done with transform origin instead, I think that would simplify the code a bit, instead of using the translate you just scale the x with different origins respectively. Could be paired with cubic-bezier for the transition to eliminate that unwanted scroll across all buttons a little.

[@elson_correia]

super cool and i learned new tricks. what if you had a span element as the bottom bar and used hover on li to move it around? would it be simpler?

[@KevinPowell]

Same thing, but without needing to add anything to the html 🙂

[@liski12]

If you want to support the "fast" hovering, couldn't you add a rule that adds a really fast full width scale when the "nav li" is surrounded?

[@KevinPowell]

Yeah, if we did that with the starting animation it would help, but I don't think we could get it to be perfect.

[@Grinel]

this awesome very helpful

[@oliver139]

0:36 What I think is..WTF!?🤯

[@mamadoumar3060]

really didn't know how to select the precedent element of an element. That's awesome ! but i am not sure that i really understand the principle. By the way, is it possible to select the parent of a selected element: i mean, if i have a paragraph containing a link, then if i select the link first, like link:hover, can i get access to the paragraph to modify for exemple the color of it when the link is hovered.

[@KevinPowell]

That's what :has() is for :D (just be careful with browser support). So you could do p:has(a:hover)... so it selects a paragraph if it has a link inside, being hovered on.

[@LoveSpongez]

What did you use to quickly comment out the line on 10:28 ?

[@KevinPowell]

Ctrl + / or cmd+ / on a mac

[@seifnaguib1]

Can you pleeease do one that IS perfect with Javascript?

[@juan9982]

Can someone explain me why its not neccesary to use the ::after when he implemented the custom properties? I don't get it

[@RAJARAMAN005]

Sir I have a doubt how to creat a website that have a option of selecting particular languages example I created a ott web site that has a multiple audio language in that video so how the user select a particular audio please help me 🙏

[@md-gy7gu]

Unfortunately the hover effect doesn't work in mobile which is where most people are viewing web content these days 😢

[@TechBuddy_]

I am excited about has but this is not it we need cursor position or something similar in native css to achieve better ux

[@KevinPowell]

Totally agree that it's a bit limited, and using JS would probably be for the best if you really wanted to use this type of effect in production, but still a lot to learn from building it out :D

[@TechBuddy_]

@@KevinPowell yeah

[@alexandryurkov9168]

Nice👍

[@JaGaNezhil]

Super❤

[@waseemusman421]

Great

[@TheBoysMemes123]

awesome

[@RondellKB]

how can you do this from start to finish without missing a beat?

[@KevinPowell]

Editing 😂

[@RondellKB]

@@KevinPowell lol, good to know.

[@lasindunuwanga5292]

Can you please increase your volume

[@kjhunkler]

Where have you been all my life?

[@GiorgiKavtaradze-cy1ye]

👏👍

[@Bean-kw2xp]

friend and friends

[@clarence9527]

so difficult video.

[@dasten123]

oh great, it's using has :/ I can't use it because of damn firefuck

[@KevinPowell]

I talk about making a fallback at the end for FF, or if you look at the pinned comment, there's a clever solution that doesn't use has :)

[@dasten123]

@@KevinPowell I can't use that cause all my users use Firefox^^ but thanks for pointing out the codepen link

[@themarin1992]

thx man

[@Iskael]

awesome