Kevin... for the past 2 years I've been watching you, you are still making me doubt my frontend skills and teaching me a whole new and awesome set of skills
Love your channel. Using a bit of geometry you know that the corner will be sqrt(2) * --border-radius away from ur before elements center. Sqrt(2) is 1.414 so if you make your box shadow stroke (0.5 * --border-radius) you are guaranteed to fill the gap while basically minimizing the chance of overlapping other content on the page.
Seems like every time I'm about to implement something, you come out with a video for almost exactly what I need and make my life a little bit easier. Thanks!
Hi there! As a trainer at a coding bootcamp, you so often already helped me give my students additional and deep informations on several topic just like Grid, Position etc. Now to give something back for all the times you helped me: I personally use a element instead of for my navigation lists, as per definition by MDN Web Docs I find it more fitting. In the end it may not really matter much, as the browser treats "menu" exactly the same as "ul" (giving it the exact same default stylings, too). However, it makes reading and understanding code just this tiny bit more comfortable in my opinion.
I was seriously looking for your video on using view-transitions when I got the email about the new vid and there is some gold in here about it too! Kismet!
The more I watch your tutorials, the more I believe I am a frontend dev, really enjoy seeing code come to life! Thank you so much, you have helped me understand frontend so much over the two years I've been studying.
Iv been doing the same, but have you seen current job market? It will be miracle if you ever get hired and css skills are extremely unimportant as everyone just uses frameworks anyway. I'm not saying it to be ahole, I'm simply in same situation as you, over last 2 years front end pretty much died. Because of massive fang layoffs etc they can hire extremely skilled people as juniors.
Minor suggestions before the transitions. .nav-list li.active { background-color: transparent; ... } .nav-list li.active::before { ... } for the box-shadow make it based on your --border-radius and gap bewteen nav and main, maybe a min() between the two.
Love these kind of videos, i gain so much new insight and it feels amazing. I do FE work but never the most intense design aspects of it so watching these is a great way to learn and improve.
Cool project! I think you could achieve the rounded corners effect semantically cleaner though by keeping the pseudo elements square and using a radial gradient as the background image. For the top one you would have the center of the gradient be in the top left corner, and add a transparent color stop at --border-radius, then another color stop also at --border-radius that has the body-bg color. :)
i wanted to write the same thing, it is in my opinion so much easier to do these with radial gradient trick, the only downside is possibly the additional step of adding the antialiasing by making the transition between transparent and solid color offset by like .3px but that's still super easy to implement. not even talking about the fact that he wouldn't have to use 2 pseudos, easily he could have done both corners with just one.
Hmm I'm curious what that radial gradient would look like using one pseudo element for both. I know RU-vid isn't ideal for posting code but if you see this I'd love to know what that radial-gradient value would look like.
@@clevermissfoxnot sure what they had in mind but you can layer multiple radial gradients into one background so if you just had the pseudo element be big enough you could place both gradients inside it. That's what I think it would be
You could probably do this with an SVG and a mask, or maybe a clip-path, and you'd have that, but then the positioning of it relies on JS. That's fine if it's what you need, but I'd rather fake it and keep the functionality simpler if I can :)
@@KevinPowell Thank you for answering! Did not expect that. Love your content and don't think that there is anybody coming close to the quality of your HTML\CSS content in my native language. Especially when it comes to accessibility.
Looks great! Althought I might have put all the paddings (not the margins though) on the a, rather than the li, so that you can hover over the entire area and have the link respond to clicks
would like to see your thoughts on how to tackle a dynamic mega menu. Meaning, showing a simple drop down, but then show a larger mega menu if the list has more than one nested nav automatically
Hi Kevin, nice video as always. Next tricky step : use an image or a gradient under the sidebar and active section transparent. I had to do it for a client it's a bit more complex but fun to do. I'm curious to see your solution. And if the client wants the transition for all brothers, it can be done in ajax but it's much more complicated to do 😅
amazing content and presentation, you made css very easy for me to the point that i really don't understand peoples frustration with it. And since i am kinda new to webdev, i really don't see why one would go with a framework instead of modern vanilla css (for personal and small scale projects obviously)
Genuis method to achive the task ... Great, 3 months ago i had to do the same design of this nav it took me 3 hours to find a way but it was complicated than yours, but the one you made is a lot easier and straight forwards. ended up with me designing these curves on a figma and exported it as svg stick it with img tag with absolute position 😂😂 much easier and more simple
I really enjoy listening to you, Kevin, and watching your videos. You have such an easy manner about yourself. The time just flies by because we enjoy it so much. And you’re a great teacher as well. Keep up the good work.
Cool video Kevin! It shows some ideas behind making the curved navigation menu. For the animation to work without enabling the experimental feature you can use css sibling selector. Also, if you want to support all types of background, from gradients to images, use SVG shapes instead of box shadow.
This convex border radius won’t work if you have a dynamic background. It will work in carefully controlled settings but it’s not robust. I’m working on a library that does let you put inverted rounded corners on elements where they overlap or are contiguous by drawing SVG paths underneath them. It’s fast enough to run on every frame during animations which looks pretty cool. I clicked the thumbnail *because* it has a background image behind the inverted corners. I hoped you had found a better way than I.
That's an interesting solution. I always did this kind of stuff with square pseudoelements with radial gradient in the background, centered in one of the corners. I'm sure you know this method, but I'm curious why you didn't do that one. Are there any downsides to it, that I don't know about? 😃
Hi Kevin you know how to take css to the max and tour suggestions / lessons create a good basis. However, as a programmer (JS only) I wonder if you are not adevertising CSS as a "new" programming language - once just for layout - now a battle with lots of tips and tricks, speedy - variable declarations all over. In many of the comments I read respect for your knowledge but also the question to go back to the (your) basics -CSS only. I am one of them. Still learning, Benny
Oooh, I remember when I was a young developer, we had an application with that kind of rounded borders. We implemented it with a bunch of and semi transparent gif images. 😂 Of course, that was 20 years ago.
Setting an exact pixel width for the shadow seems like it won't work for high font sizes, because the radius will grow but the shadow won't. I think you need a shadow width of at least (√2-1) * border-width to cover the corner.
We could do that! Or well, sort of, we have sqrt() in CSS now, but it's only in Firefox and Safari, waiting on Chrome still. (EDIT: could probably use a calc and base it off the border-radius size as well, be a bit less precise, but I think would get the job done for most situations)
Kevin thanks for shearing your experience its really helpful for us but now i want some ting mindblowing like animation and hover effect please solve this problem please make some thing on hover and animation best wishes from pakistan
Hey our magician-alchemist, thank you, man. May all the Gods from the seven kingdom and beyond be on your side. Regarding the view-transition API, today there is no such on Canary 131.0.6732.1. But it's here in the regular Chrome version 129.0.6668.59.
awesome video as always! thank you! question: couldn't you have have just used '.nav-list li.active a' as the selector instead of the nth-child route? it would still only be selecting one element, right ?
What will happen to the nav if i need to scroll down ? Will it always be visible ? I tried to test it but It doesn't work with what i cloned from the github repository. I really learn a lot with your videos thank you very much !
Love your videos, keeps me humble :) I watched your video on dvh, svh and was thinking why not use them... Then poof, you mentioned one might want to use them, Could be wrong but per your comments seems best to only use svh always?
@@KevinPowell Thanks been too long for more CSS battles, need to keep Kyle from Web Dev Simplified in his place. All in fun :) Not that i'm trying to start a fight...
How to Create Responsive Navigation Bar using only html and css | Navbar | Animated Navbar with CSS Must Watch: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Ukq8lvIkJ0I.html
to position the corners could we, for example, place the top corner at the bottom and give it a bottom of 100%. ive done that in the past and it seems to work but i’m wondering if it ever causes issues. is the method you used more accurate for any reason?
Ho Kevin, very nice and interesting video. For pseudo elements I think that you could also use bottom 100% for the before and top 100% fpr the after. You should obtain the same result without using calc and variables. Any particulary reason that you use the calc? Cheers
Yeah my thoughts exactly. Would make the code simpler because there is no need for these variables then. That's magic of programming, things can be done in multiple ways.
Wouldn't it be better if the ::after was a rotated version of ::before? Write the logic for the shadow and rounding for ::before and have the same for ::after but just rotate it to flip upside down?
Love your videos Kevin, but the thumbnail for this one has a slight issue: there it looks like the body background is a gradient that continues perfectly at the cut-out rounded corners. Which isn't possible with your shown solution. I clicked hoping you'd pulled that off, so somewhat disappointing. Of course for any case with a solid background color this solution works well and the animation looks good.
@@KevinPowell Negative value itself is not an issue, but you needed to introduce variable to specify the offest, when with 100% you don't need it. Also using transparent for preudos' background makes you solution compatible with non-solid backugound under the elements (I expected it not to work, but it does). I uploaded video with some modifications to my channel with codepen in its description - I think it may be interesting for you.
I dont know how to use n-th child , but I think it can be achived with n-th child the active tab needs to get its previous and next element and just just border top end radius and border bottom end radius!? May be it can work !? Please let me know if it can be ? As you are master in CSS so you can easily tell me if its possible. Thank you.
New viewer here, so don't know if you addressed it on later videos, but apparently they now changed it, and now instead of the meta tag, you put @view-transition {navigation: auto;} in your css
video is amazing. Really helped my uni project but i am encountering a strange problem. My navbar is for my profile page and has ofc some elements but they toggle between fieldsets with js. With said script, i add/remove the class actvie bur for some reason, the trasition isnt applied. I can see the transition is being registered by the browser because if i refresh the page, i can see the "switching animation" from the tab i am to the defaul active tab, which is the first nav element.
