Create direction-aware effects using modern CSS

Подписаться 920 тыс.

Просмотров 65 тыс.

50% 1

🎓 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 RU-vid 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 RU-vid’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 RU-vid 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!

Опубликовано:

28 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 88

@KevinPowell 10 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

Kevin superest's )))))))

@eioluseyi 10 месяцев назад

Wow!

@Victor_Marius 10 месяцев назад

@@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 10 месяцев назад

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 10 месяцев назад

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.

@_lonewolf 10 месяцев назад

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 5 месяцев назад

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 10 месяцев назад

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

@BenAbode 10 месяцев назад

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!

@kaustavroy6542 10 месяцев назад

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

@tyler-simoni 10 месяцев назад

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

@Jana-ns5sg 10 месяцев назад

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

@screamtwice 10 месяцев назад

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!

@avon700 10 месяцев назад

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

@maxwebstudio 10 месяцев назад

That's an amazing tips. Thank you Kevin

@faithful834 10 месяцев назад

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

@shaystibelman 9 месяцев назад

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

@eioluseyi 10 месяцев назад

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!!🎉🎉

@deadlyecho 10 месяцев назад

That cleaning you've done is top notch 👌 👏

@ssava_ema 10 месяцев назад

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

@shadowcraftplayer9075 10 месяцев назад

Amazing effect!

@mannixmd 10 месяцев назад

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

@Grinel 10 месяцев назад

this awesome very helpful

@nitsanbh 10 месяцев назад

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 10 месяцев назад

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 🙂

@stevemarshall5249 10 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

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

@PicSta 10 месяцев назад

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

@74Gee 10 месяцев назад

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

@elson_correia 10 месяцев назад

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 10 месяцев назад

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

@themarin1992 10 месяцев назад

thx man

@CLeovison 10 месяцев назад

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

@Frank-mcdonaldDe 10 месяцев назад

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 10 месяцев назад

I got the answer right away....

@MrJettann 10 месяцев назад

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 10 месяцев назад

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.

@nadeemr1070 10 месяцев назад

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

@gadoosher 10 месяцев назад

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 😅

@denoww9261 10 месяцев назад

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 10 месяцев назад

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 10 месяцев назад

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

@denoww9261 10 месяцев назад

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

@user-kh4ib1cc5o 6 месяцев назад

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

@rumbazumba3189 10 месяцев назад

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.

@QwDragon 10 месяцев назад

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

@KevinPowell 10 месяцев назад

Care to elaborate how subgrid might help here? I'm genuinely curious, but I can't think of how I'd do it.

@eioluseyi 10 месяцев назад

@@KevinPowellI'm curious too.. I'm hoping commenting here would help me get notified when the response comes

@JaGaNezhil 10 месяцев назад

Super❤

@waseemusman421 10 месяцев назад

Great

@mamadoumar3060 10 месяцев назад

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 10 месяцев назад

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.

@Iskael 10 месяцев назад

awesome

@alexandryurkov9168 10 месяцев назад

Nice👍

@dportalesr 3 месяца назад

Im assuming the full video is still in the works?

@somewonderfulguy 4 месяца назад

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!

@liski12 10 месяцев назад

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 10 месяцев назад

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

@juan9982 27 дней назад

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

@Xeratas 10 месяцев назад

Why are you always using tags to define your navigations? I only rarely come across this. RU-vid 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 10 месяцев назад

semantics

@KevinPowell 10 месяцев назад

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

@LoveSpongez 10 месяцев назад

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

@KevinPowell 10 месяцев назад

Ctrl + / or cmd+ / on a mac

@mwzndev 10 месяцев назад

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!

@RAJARAMAN005 10 месяцев назад

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 🙏

@seifnaguib1 10 месяцев назад

Can you pleeease do one that IS perfect with Javascript?

@TechBuddy_ 10 месяцев назад

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 10 месяцев назад

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_ 10 месяцев назад

@@KevinPowell yeah