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.
@jameskamau13267 ай бұрын
I can't believe you solved an issue that took me 3 weeks to solve in just 15 minutes. This is amazing thanks
@GetPsyched68 ай бұрын
Kevin, i just wanted to say, you're a really nice person and you make the world a better place. Thanks for all the amazing content you give us.
@KevinPowell8 ай бұрын
I appreciate that, thanks so much!
@AlexCouch657 ай бұрын
Not gonna lie but i was expecting a "...but" in here
@beardedraider47518 ай бұрын
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.
@wykydytron7 ай бұрын
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.
@tspander8 ай бұрын
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. :)
@Cuwubiq8 ай бұрын
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.
@clevermissfox8 ай бұрын
Hmm I'm curious what that radial gradient would look like using one pseudo element for both. I know KZbin isn't ideal for posting code but if you see this I'd love to know what that radial-gradient value would look like.
@clevermissfox8 ай бұрын
@@Cuwubiq wait cubiq I think I know you from discord! I'll ask you there!
@tspander8 ай бұрын
@@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
@knolljo8 ай бұрын
Your css intuition is so good, thats probably the result of years of building stuff with it
@deatho0ne5878 ай бұрын
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.
@KevinPowell8 ай бұрын
For the box-shadow, that would work great. Not sure why you suggest the transparent background though? It would just be white then 🤔
@deatho0ne5878 ай бұрын
My bad did not try it, could not inherant or initial work then?
@wchorski8 ай бұрын
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
@TomWien8 ай бұрын
Thank you, Sir!!! Thank you for your content and especially this one. I tried so hard to get a responsive one, with grid, flex .... Thank you
@edwardhandrich60438 ай бұрын
Great video as usual. I've always wanted to do a star trek "LCARS" type of nav bar and with some css adjustments this would work great.
@j.m.manhard8 ай бұрын
Hey Kevin, just wanted to point out the little typo in the thumbnail. Cheers!
@KevinPowell8 ай бұрын
Ooops! Thanks for mentioning that!
@bhuvanesht92228 ай бұрын
this guy is a god in front-end
@gbbarn8 ай бұрын
Thank you Kevin for these super helpful videos!! Didn't know about the view-transition meta tag.
@KevinPowell8 ай бұрын
Thanks so much!
@uahnbu8 ай бұрын
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.
@donniedamato8 ай бұрын
Instead of using calc for the top/bottom, set them to 100%. You'll get the same effect with less setup.
@l-cornelius-dol8 ай бұрын
Fascinating. How I wish CSS was internally consistent and coherent, so I didn't have to memorize a huge ball of esoteric once-off's.
@TheodorSirmanoff5 күн бұрын
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.
@EricFressange8 ай бұрын
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 😅
@KevinPowell8 ай бұрын
Yeah I went the easy route here with a solid background 😅
@williamburl43034 ай бұрын
Thanks Kev! Awesome content as always.
@Sanguine8308 ай бұрын
One second in the video, really nice content! I was wondering about those outward curves.
@Feriy178 ай бұрын
im new to see ur tutorial and u explain every single think and that's make me got new inside in every think that u explain
@leondietsch70138 ай бұрын
13:48 The actual highlight of this video is how to make a HTML/CSS watermelon slice. 🍉
@stephaniepeters25908 ай бұрын
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
@pouggey79078 ай бұрын
You’re a magician you are, Kevin!
@mendosis8 ай бұрын
what a blast from the 90s!
@enryfrafranci8 ай бұрын
Quick tip, instead of doing body min-height: 100vh, i found that it's usually less problematic to do body and html height: 100%
@priyanshusingh47387 ай бұрын
god Damn you make it look so easy man!
@krims2548 ай бұрын
Would love to see a video on how to tackle border-radius smoothing.
@АлександрГерасимов-с3щ8 ай бұрын
"And I can do this type of thing here" This type of thing: watermelon slice
@koolvoid3 ай бұрын
Very cool :) ill try out!!
@macdee51088 ай бұрын
I really like this side nav. 😍
@mossawirtech25316 ай бұрын
I love this approch. But how can we make the radius transparent so this inverted radius go with all type of background? Or gradient bg?
@ishowspeed71918 ай бұрын
This type of animations is only possible for you sir
@dasflugergehaimer44768 ай бұрын
Dude, how long have you been doing this? From Russia with love.
@KevinPowell8 ай бұрын
A *long* time, lol. Been teaching it for 10 years, and been writing it for longer than that :D
@dasflugergehaimer44768 ай бұрын
@@KevinPowell As they say in Siberia. I respect your character.
@mirazh82167 ай бұрын
you always amaze me
@pennywiseff1403 ай бұрын
now we can use @view-transition { navigation: auto; } instead of the meta tag
@basicsprogrammingandelectr30438 ай бұрын
you are really smart......i love your works. please if you have exprience in backend like golang or node make a video .....
@hsh117A8 ай бұрын
im def taking this and turning it into a burger nav for phones
@lishhhhmm2 ай бұрын
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?
@mundoextrano88928 ай бұрын
Thank you so much Kevin. You're amazing Thank you
@johncerpa37828 ай бұрын
Excellent video
@andrewrea27998 ай бұрын
That was way cool Kevin.
@brianjett14468 ай бұрын
Can you please answer my question, do you have a video about how to make a responsible drop-down menu???
@mswalsh687 ай бұрын
would the transition work in react? Since you’re not actually changing pages per se… you’re just re-rendering components on the page.
@patrick_foley8 ай бұрын
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?
@hookenz3 ай бұрын
Awesome content. Personally I prefer quite fast animation. Slow animation is .... well it slows you down and gets tiresome to look at.
@joyvideos18028 ай бұрын
Good Content, Thanks Kevin
@aklikes8 ай бұрын
Any design thoughts on how to handle this in responsive.
@KevinPowell8 ай бұрын
I'd just have it collapse sideways with a hamburger to "open" it probably. You can animate grid template columns, though in this case, it might be best not to do that, since the content on the other side would get repainted as well. Might be worth going with a more fixed approach, and having to add padding or margin to make sure content doesn't go under it.
@MRN1ch0l458 ай бұрын
thats a cool Watermelon
@blagojamojsoski51665 ай бұрын
Amazing! do you have an example how to do it responsive with hamburger menu? tnx
@Kr0s0n8 ай бұрын
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 !
@Jarrod00678 ай бұрын
this would be so easy in Astro since they've recently added view transition support
@notenoughreddit56188 ай бұрын
Awesome stuff, I would like to see how you would implement it with nested links
@sknEK_code_chef8 ай бұрын
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 ?
@diptackb148 ай бұрын
Enjoyed the video ❤
@femimicheal94415 ай бұрын
I love you tutorial sir😊
@Dexter101x8 ай бұрын
Cool stuff
@ravidubey68173 ай бұрын
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.
@riccardopavesi93248 ай бұрын
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
@rand0mtv6608 ай бұрын
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.
@bradeagle72978 ай бұрын
why not use border solid instead of box shadow?
@МихайлоХодак-й7ъ8 ай бұрын
Cool. But what if one of the backgrounds is transparent?
@hristoistoyanov8 ай бұрын
Thanks Kevin, are there any responsive considerations?
@saerujiАй бұрын
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
@lukemartinau2 ай бұрын
In the ::before instead of the ‘top: calc()’ why not just say ‘bottom: 100%;’?
@justinernest23636 ай бұрын
how do you get your browser to update as you write your code?
@donniedamato8 ай бұрын
Re: the view-transition buggy behavior. I wonder if isolation: isolate; would help or maybe one of the contain values like contain:paint;?
@GerryDanen7 ай бұрын
Cool!
@Tjc166 ай бұрын
Amazing u can do this with only html and css
@dand44858 ай бұрын
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?
@KevinPowell8 ай бұрын
If something is lower down on the page, there might be an argument for dvh. The problem still it that it can cause reflows though.
@dand44858 ай бұрын
@@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...
@lolikpof6 ай бұрын
why is the finished code in the description so different from the video? The body isn't a grid, the nav position is fixed.. like from another video..
@krystianklek90154 ай бұрын
How come my CCS behaves quite differently even though I do everything the same
@othmanosx8 ай бұрын
Can you please do it with glassmorphism? I tried to do it on my mobile bottom nav bar but it gets tricky when dealing with transparency and borders as the links between the main element and the reverse borders are hard to smooth out. It looked impossible to do but I wonder if anyone could give it a try.
@AlphaPlus98 ай бұрын
I tried to do this, but either I did something wrong or it's very buggy and does not seem to work very well. The transition is working like every other time. I think I'll stick with non-experimental stuff ;)
@CoderzF18 ай бұрын
dude... lol, we literally have the same glasses
@bhuvanesht92228 ай бұрын
I'm a beginner in JavaScript, Pls suggest how to learn and master the JavaScript, I'm really curious to JavaScript but i don't know the right way to learn So please help sir
@cssgabriel8 ай бұрын
Very good!
@cavenmasetla87408 ай бұрын
Hey Kevin I'm very new here please recommend a beginner video for me.
@mbonani8 ай бұрын
13:57 Mmm... Watermelon 🍉
@QwDragon8 ай бұрын
Don't use negative top, use bottom: 100% instead.
@KevinPowell8 ай бұрын
That works too, but I don't see any issue with using a negative here?
@QwDragon8 ай бұрын
@@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.
@orlandoferazzani36398 ай бұрын
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.
@JawsoneJason8 ай бұрын
The screen flashes are really bothersome
@VedanthKUditya5 ай бұрын
It would just be better if put a media query also
@gamertag87218 ай бұрын
I do have a serious question, why is this design making its rounds these days --- I see a lot of pens with the "modern" menu floating around -- a lot of variations, some even have true transparency, and are not faked out with the background color. I even forked a pen to add transitions to the first one I ran across this design (went and checked it was in mid-2021), I remember menus like this in the early 2000s So why is this design suddenly so popular.
@wykydytron7 ай бұрын
In current job market it seems like being front end KZbinr is only way to have job in front end. 2023 in my country we had over 200 job openings for actual juniors any given time. Today we had 6 opening and all 6 required "juniors" to have several years of experience and to be fluent in several languages, bare minimum was Js, react,angular, next, express and several other more specific by company. It's absurd. I no longer feel like front end is job worthy anymore.
@SXsoft998 ай бұрын
8 years ago i had to do a double inverted border radious..... we all hated the designer for presenting it to the client
@FeiBenZhu6 ай бұрын
Hello my friend & friends ❤
@yoavravid78938 ай бұрын
This would be so much easier just using an image
@KevinPowell8 ай бұрын
But this is more fun 😅 - Plus it makes customization a lot easier once you've set it up :)
@GamerDevIND8 ай бұрын
❤
@jose6blacky8 ай бұрын
wow
@haal49198 ай бұрын
I wonder what "anmation" it is :)
@KevinPowell8 ай бұрын
Oops!
@stanleylafond46503 ай бұрын
I don't think "the juice is worth the squeeze" with view transitions. Especially with the warning that chrome canary is unstable. the way it's used in the navigation bar seems like flash over substance.
@Sightools8 ай бұрын
don't work on old browsers
@RAJARAMAN0058 ай бұрын
Sir can you please upload video about loader please 😢
@KevinPowell8 ай бұрын
Any type in particular you're looking for?
@jorbitmultimedia8 ай бұрын
so this is just like a preview and not a tutorial on how to do it from scratch😭
@KevinPowell8 ай бұрын
I do provide the finished code, and I did look at all the code to do it. I didn't write the HTML on screen, but I showed the parts you need. It's the same pattern you'd find for any navigation (nav, with a list inside, with the links in the list items) which is why I went a bit fast over that part to get into the styling of it.
@BethellJack5 ай бұрын
CSS is really really complicated for quite a simple ask. It hurts hy head
@Human_Evolution-8 ай бұрын
Love this channel but side navs are lame!
@PaulAllsopp-rh5gbАй бұрын
Hmm. I was really liking this until you defined a custom property inside one selector and then used it inside another. From a JS perspective that would be like breaking scope. You're adding it inside a block, but it's become global. Yuk! Still, I'll keep watching because I do like the end result.
@PaulAllsopp-rh5gbАй бұрын
Hmm, so I just found this through JS: document.documentElement.style.setProperty('--document-height', `${some_variable}px`); So, when defining custom properties, are they scoped to the document? More investigation.
@owlmostdead94928 ай бұрын
How is CSS this limited and hacky in 2023? The result looks amazing but the way to get there is straight up grotesque.
@KevinPowell8 ай бұрын
hah, we need to get a little hacky with certain things. "inverse" corners like we have here are something it's not very good at.
@memoryleakerz8 ай бұрын
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
@easternadventures99788 ай бұрын
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!