Create a clean, modern navigation with HTML & CSS

  Рет қаралды 156,471

Kevin Powell

Kevin Powell

Күн бұрын

Пікірлер: 189
@GetPsyched6
@GetPsyched6 11 ай бұрын
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.
@KevinPowell
@KevinPowell 11 ай бұрын
I appreciate that, thanks so much!
@AlexCouch65
@AlexCouch65 10 ай бұрын
Not gonna lie but i was expecting a "...but" in here
@memoryleakerz
@memoryleakerz 10 ай бұрын
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
@jameskamau1326
@jameskamau1326 9 ай бұрын
I can't believe you solved an issue that took me 3 weeks to solve in just 15 minutes. This is amazing thanks
@easternadventures9978
@easternadventures9978 11 ай бұрын
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!
@jimhillr
@jimhillr 11 ай бұрын
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.
@ochferdi
@ochferdi 11 ай бұрын
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.
@clevermissfox
@clevermissfox 11 ай бұрын
How did you know I was working on a left fixed nav?? Amazing , I’m sure this will help me level up !
@clevermissfox
@clevermissfox 11 ай бұрын
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!
@TomWien
@TomWien 11 ай бұрын
😂😂😂 same here as a beginner
@nhgamer4537
@nhgamer4537 11 ай бұрын
Same
@gbbarn
@gbbarn 10 ай бұрын
Thank you Kevin for these super helpful videos!! Didn't know about the view-transition meta tag.
@KevinPowell
@KevinPowell 10 ай бұрын
Thanks so much!
@tspander
@tspander 11 ай бұрын
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. :)
@Cuwubiq
@Cuwubiq 11 ай бұрын
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.
@clevermissfox
@clevermissfox 11 ай бұрын
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.
@clevermissfox
@clevermissfox 11 ай бұрын
@@Cuwubiq wait cubiq I think I know you from discord! I'll ask you there!
@tspander
@tspander 11 ай бұрын
@@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
@deatho0ne587
@deatho0ne587 11 ай бұрын
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.
@KevinPowell
@KevinPowell 11 ай бұрын
For the box-shadow, that would work great. Not sure why you suggest the transparent background though? It would just be white then 🤔
@deatho0ne587
@deatho0ne587 11 ай бұрын
My bad did not try it, could not inherant or initial work then?
@beardedraider4751
@beardedraider4751 11 ай бұрын
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.
@wykydytron
@wykydytron 10 ай бұрын
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.
@knolljo
@knolljo 11 ай бұрын
Your css intuition is so good, thats probably the result of years of building stuff with it
@VedanthKUditya
@VedanthKUditya 8 ай бұрын
It was absolutely wonderful hover effects. I'd like to call videos as a session more than video. It's that useful
@bhuvanesht9222
@bhuvanesht9222 11 ай бұрын
this guy is a god in front-end
@Hoches
@Hoches 11 ай бұрын
Man, you are such a wizard! The vid gave me a brain freeze but I still love it.
@p_o_z_e
@p_o_z_e 11 ай бұрын
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.
@Wikkido5000
@Wikkido5000 11 ай бұрын
12:58 I'm giggling, loving the videos as always!
@TitanBhaiya
@TitanBhaiya 11 ай бұрын
I was searching for that yesterday and guess what Kevin just read my mind . Thanks Kevin You're always a great help
@l-cornelius-dol
@l-cornelius-dol 11 ай бұрын
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.
@pouggey7907
@pouggey7907 11 ай бұрын
You’re a magician you are, Kevin!
@mnamhie
@mnamhie 11 ай бұрын
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.
@williamburl4303
@williamburl4303 7 ай бұрын
Thanks Kev! Awesome content as always.
@TomWien
@TomWien 11 ай бұрын
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
@vahxs
@vahxs 10 ай бұрын
I am taking this and implementing to my school website thank you for an idea!
@ihebkhalifa6669
@ihebkhalifa6669 10 ай бұрын
thank you for sharing Kevin, I like your content, specially the CSS battle i hope to see few more
@PrinceDalsaniyaYT
@PrinceDalsaniyaYT 11 ай бұрын
Pretty straight forward. Lovely tutorial. Keep up the good work, we support you. 👍
@Feriy17
@Feriy17 10 ай бұрын
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
@Sanguine830
@Sanguine830 11 ай бұрын
One second in the video, really nice content! I was wondering about those outward curves.
@mendosis
@mendosis 11 ай бұрын
what a blast from the 90s!
@WallaceThiago
@WallaceThiago 10 ай бұрын
You teach me something new everytime I watch your videos. Thank you so much 🎉
@blu3tan
@blu3tan 11 ай бұрын
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)
@edwardhandrich6043
@edwardhandrich6043 11 ай бұрын
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.
@uahnbu
@uahnbu 11 ай бұрын
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.
@macdee5108
@macdee5108 11 ай бұрын
I really like this side nav. 😍
@rubengarciajr
@rubengarciajr 11 ай бұрын
I always learn something watching each video you make!
@pułkownikkaczodziobyzpodlasia
@pułkownikkaczodziobyzpodlasia 10 ай бұрын
That’s wonderful! I always wondered how the outer round could be achieved
@myartikool
@myartikool 11 ай бұрын
Damn, I thought the bg-color gonna be transparent and got very excited.
@KevinPowell
@KevinPowell 11 ай бұрын
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 :)
@myartikool
@myartikool 11 ай бұрын
@@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.
@abdoseadaa
@abdoseadaa 9 ай бұрын
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
@leondietsch7013
@leondietsch7013 11 ай бұрын
13:48 The actual highlight of this video is how to make a HTML/CSS watermelon slice. 🍉
@purringdemon
@purringdemon 11 ай бұрын
Great video. Thank you for such amazing content!
@EricFressange
@EricFressange 11 ай бұрын
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 😅
@KevinPowell
@KevinPowell 11 ай бұрын
Yeah I went the easy route here with a solid background 😅
@wchorski
@wchorski 11 ай бұрын
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
@mundoextrano8892
@mundoextrano8892 11 ай бұрын
Thank you so much Kevin. You're amazing Thank you
@eckee
@eckee 10 ай бұрын
Oh my favourite layout, navigation on side panel. Combine it with neumorphism and it will be my wet dream.
@zaidkamil
@zaidkamil 11 ай бұрын
Thanks for all the amazing content you give us. 😇😇😇
@priyanshusingh4738
@priyanshusingh4738 9 ай бұрын
god Damn you make it look so easy man!
@TheodorSirmanoff
@TheodorSirmanoff 2 ай бұрын
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.
@enryfrafranci
@enryfrafranci 11 ай бұрын
Quick tip, instead of doing body min-height: 100vh, i found that it's usually less problematic to do body and html height: 100%
@andrewrea2799
@andrewrea2799 11 ай бұрын
That was way cool Kevin.
@stephaniepeters2590
@stephaniepeters2590 10 ай бұрын
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
@donniedamato
@donniedamato 11 ай бұрын
Instead of using calc for the top/bottom, set them to 100%. You'll get the same effect with less setup.
@ishowspeed7191
@ishowspeed7191 11 ай бұрын
This type of animations is only possible for you sir
@joyvideos1802
@joyvideos1802 11 ай бұрын
Good Content, Thanks Kevin
@krims254
@krims254 11 ай бұрын
Would love to see a video on how to tackle border-radius smoothing.
@markboots_
@markboots_ 11 ай бұрын
instead of having the negative positions with the calcs of the the vars, you could have done bottom 100% and top 100% for the opposite pseudo elements
@koolvoid
@koolvoid 6 ай бұрын
Very cool :) ill try out!!
@basicsprogrammingandelectr3043
@basicsprogrammingandelectr3043 11 ай бұрын
you are really smart......i love your works. please if you have exprience in backend like golang or node make a video .....
@tipeon
@tipeon 10 ай бұрын
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.
@hsh117A
@hsh117A 11 ай бұрын
im def taking this and turning it into a burger nav for phones
@toonice555
@toonice555 7 ай бұрын
Thanks for the extremely phallic episode 😂
@diptackb14
@diptackb14 11 ай бұрын
Enjoyed the video ❤
@j.m.manhard
@j.m.manhard 11 ай бұрын
Hey Kevin, just wanted to point out the little typo in the thumbnail. Cheers!
@KevinPowell
@KevinPowell 11 ай бұрын
Ooops! Thanks for mentioning that!
@riccardorighetti5632
@riccardorighetti5632 3 ай бұрын
Simply genious
@WebDevXpert
@WebDevXpert 10 ай бұрын
How to Create Responsive Navigation Bar using only html and css | Navbar | Animated Navbar with CSS Must Watch: kzbin.info/www/bejne/i5zUaZ-sftB9Zqs
@virtual5754
@virtual5754 11 ай бұрын
"And I can do this type of thing here" This type of thing: watermelon slice
@truvc
@truvc 11 ай бұрын
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.
@johncerpa3782
@johncerpa3782 11 ай бұрын
Excellent video
@mirazh8216
@mirazh8216 10 ай бұрын
you always amaze me
@panmrow5009
@panmrow5009 11 ай бұрын
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? 😃
@femimicheal9441
@femimicheal9441 8 ай бұрын
I love you tutorial sir😊
@iservisat
@iservisat 10 ай бұрын
Thanks Kevin for this. This tutorial is for creating the video in every page. Do we need to use JS is we want only one common menu?
@sagshah10
@sagshah10 11 ай бұрын
Love the tutorial as always but I had to point this out coz I couldn't unsee what I saw 😆. Firstly at 12:45 tell me what you created for the active menu doesn't looks like a pen*s and if that wasnt hillarious enough, listen to the words you said from 12:45 - 12:53 😆 LMAOOOO Just can't stop laughing at it
@zygoloid
@zygoloid 11 ай бұрын
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.
@KevinPowell
@KevinPowell 11 ай бұрын
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)
@zygoloid
@zygoloid 11 ай бұрын
Maybe we could use an approximate upper bound on √2-1=0.414..., eg 0.5 * border radius.
@cssgabriel
@cssgabriel 11 ай бұрын
Very good!
@mossawirtech2531
@mossawirtech2531 9 ай бұрын
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?
@Jarrod0067
@Jarrod0067 11 ай бұрын
this would be so easy in Astro since they've recently added view transition support
@sknEK_code_chef
@sknEK_code_chef 11 ай бұрын
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 ?
@bennybrouwer
@bennybrouwer 10 ай бұрын
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
@pennywiseff140
@pennywiseff140 5 ай бұрын
now we can use @view-transition { navigation: auto; } instead of the meta tag
@Dexter101x
@Dexter101x 10 ай бұрын
Cool stuff
@MRN1ch0l45
@MRN1ch0l45 11 ай бұрын
thats a cool Watermelon
@hookenz
@hookenz 6 ай бұрын
Awesome content. Personally I prefer quite fast animation. Slow animation is .... well it slows you down and gets tiresome to look at.
@notenoughreddit5618
@notenoughreddit5618 11 ай бұрын
Awesome stuff, I would like to see how you would implement it with nested links
@Tjc16
@Tjc16 9 ай бұрын
Amazing u can do this with only html and css
@ranaali5614
@ranaali5614 9 ай бұрын
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
@hristoistoyanov
@hristoistoyanov 11 ай бұрын
Thanks Kevin, are there any responsive considerations?
@dasflugergehaimer4476
@dasflugergehaimer4476 11 ай бұрын
Dude, how long have you been doing this? From Russia with love.
@KevinPowell
@KevinPowell 11 ай бұрын
A *long* time, lol. Been teaching it for 10 years, and been writing it for longer than that :D
@dasflugergehaimer4476
@dasflugergehaimer4476 11 ай бұрын
@@KevinPowell As they say in Siberia. I respect your character.
@mr_creator05
@mr_creator05 10 ай бұрын
Subscribed ✌️
@QwDragon
@QwDragon 11 ай бұрын
Don't use negative top, use bottom: 100% instead.
@KevinPowell
@KevinPowell 11 ай бұрын
That works too, but I don't see any issue with using a negative here?
@QwDragon
@QwDragon 11 ай бұрын
@@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.
@lishhhhmm
@lishhhhmm 5 ай бұрын
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?
@dand4485
@dand4485 11 ай бұрын
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
@KevinPowell 11 ай бұрын
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.
@dand4485
@dand4485 11 ай бұрын
@@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...
@patrick_foley
@patrick_foley 10 ай бұрын
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?
@donniedamato
@donniedamato 11 ай бұрын
Re: the view-transition buggy behavior. I wonder if isolation: isolate; would help or maybe one of the contain values like contain:paint;?
@riccardopavesi9324
@riccardopavesi9324 11 ай бұрын
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
@rand0mtv660
@rand0mtv660 11 ай бұрын
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.
@pneptun
@pneptun 11 ай бұрын
magic! 😀
@mbonani
@mbonani 11 ай бұрын
13:57 Mmm... Watermelon 🍉
@blagojamojsoski5166
@blagojamojsoski5166 8 ай бұрын
Amazing! do you have an example how to do it responsive with hamburger menu? tnx
@GerryDanen
@GerryDanen 10 ай бұрын
Cool!
@JaGaNezhil
@JaGaNezhil 11 ай бұрын
Super❤
@mswalsh68
@mswalsh68 9 ай бұрын
⁠would the transition work in react? Since you’re not actually changing pages per se… you’re just re-rendering components on the page.
Avoid These 5 Awful CSS Mistakes
20:42
Kevin Powell
Рет қаралды 198 М.
Write less code with these 5 CSS tips
15:38
Kevin Powell
Рет қаралды 50 М.
Чистка воды совком от денег
00:32
FD Vasya
Рет қаралды 5 МЛН
CSS position deep dive
28:14
Kevin Powell
Рет қаралды 109 М.
CSS Anchor Is The Best New CSS Feature Since Flexbox
15:39
Web Dev Simplified
Рет қаралды 377 М.
A practical guide to responsive web design
23:13
Kevin Powell
Рет қаралды 245 М.
Was I Wrong About Blazor? | Coding Shorts 111
16:35
Shawn Wildermuth
Рет қаралды 24 М.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Рет қаралды 182 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 984 М.
Please stop using px for font-size.
15:18
Coder Coder
Рет қаралды 245 М.
Can I clone this rotating, gradient, inner glow effect?
23:05
Kevin Powell
Рет қаралды 31 М.
A new approach to container and wrapper classes
25:27
Kevin Powell
Рет қаралды 270 М.