Create direction-aware effects using modern CSS
HTML-код
- Опубликовано: 31 май 2024
- 🎓 Did you know I have courses, including several free ones? kevinpowell.co/courses?...
Modern CSS is opening up some really interesting CSS-only solutions, including directionally-aware effects! In this one, I look at how we can do a directionally-aware hover effect for a navigation similar to the RUclips tabs I looked at recently, including dealing with browsers that don’t support everything we’re doing in this one.
It’s not a perfect solution, but there’s still a lot to learn by building something like this 🙂.
🔗 Links
✅ CSS Weekly: / @cssweekly
✅ The CSS Weekly video that inspired this: • CSS Navbar: Create a B...
✅ My clone of RUclips’s tabs: • How to create animated...
⌚ Timestamps
00:00 - Introduction
0:50 - What we are starting with
01:37 - Using padding instead of gap
03:10 - Adding the underline with a pseudo-element
05:12 - Adding a basic animation on hover
06:50 - Making the line move to the right
09:35 - Making the line move to the left
11:28 - Cleaning things up with custom properties
12:50 - Improving the animation so that it slides
15:50 - Browser support for browsers that don’t support :has()
17:05 - This isn’t perfect!
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
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
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
Kevin superest's )))))))
Wow!
@@petrlaskevic1948they (the li::after) have position absolute and width 100% and the li had position relative which makes the width 100% take effect correctly
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.
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.
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!
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 !
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!
You really are the king of CSS aren't you? 😄
Great as always. Will have to rewatch.
just started trying to understand css properties. It's overwhelming but hopefully watching a ton of videos will help me know what they do
Thanks Kevin for the amazing breakdown, I never thought we can use only css to do this type of stuff
So, I implemented the effect from the first video in my new portfolio site and I love it, but this is just next level! 🔥
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!
I am blown away, this is an absolute game changer 💥
That's an amazing tips. Thank you Kevin
wow, that's actually really impressive! Has is such a game changer!
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!!🎉🎉
I subscribe to your channel on any phone I handle. Love you so much, your help comes at the right time.
That cleaning you've done is top notch 👌 👏
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
Amazing effect!
hey firefox if you could hurry up and implement has:() that would be great ;)
this awesome very helpful
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 😅
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
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 🙂
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.
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.
OK that makes sense, thanks for taking the time to reply.@@KevinPowell
I didn't know you could set a variable inside a rule! My mind is rewriting a lot of CSS now
I hope that FF will have :has pseudo-class soon. Frustrating that it's not available by default yet. Great tutorial as always.
thx man
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
I got the answer right away....
Super❤
How scroll effect is working for desktop,please make a video on it too.
awesome
Nice👍
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.
Great
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?
Same thing, but without needing to add anything to the html 🙂
Nice video! For the issue you were having with overflow:hidden and bottom: -1em, could you change overflow to overflow-x to solve this?
you'd end up with a scrollbar the other way, once you set an overflow in one direction, the other will switch to scroll
@@KevinPowell I've experienced this before.
Why's that though?
@@KevinPowell Interesting, I had no idea. Thanks!
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.
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.
Hi Kevin! Would you recommend creating a css with "Nested" structure or not? Because, I rarely see someone applying it. Thanks!
Hi kevin, can you recreate the navigation bar of twitter? Thankyou
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
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.
What did you use to quickly comment out the line on 10:28 ?
Ctrl + / or cmd+ / on a mac
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 🙏
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!
Very cool! But maybe it could be done in a better way via display: subgrid?
Care to elaborate how subgrid might help here? I'm genuinely curious, but I can't think of how I'd do it.
@@KevinPowellI'm curious too.. I'm hoping commenting here would help me get notified when the response comes
Im assuming the full video is still in the works?
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?
Yeah, if we did that with the starting animation it would help, but I don't think we could get it to be perfect.
Why are you always using tags to define your navigations? I only rarely come across this. RUclips 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
semantics
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
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!
0:36 What I think is..WTF!?🤯
I am excited about has but this is not it we need cursor position or something similar in native css to achieve better ux
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
@@KevinPowell yeah
Can you pleeease do one that IS perfect with Javascript?
👏👍
Unfortunately the hover effect doesn't work in mobile which is where most people are viewing web content these days 😢
how can you do this from start to finish without missing a beat?
Editing 😂
@@KevinPowell lol, good to know.
Where have you been all my life?
Can you please increase your volume
so difficult video.
friend and friends
oh great, it's using has :/ I can't use it because of damn firefuck
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 :)
@@KevinPowell I can't use that cause all my users use Firefox^^ but thanks for pointing out the codepen link
awesome