Can I create Netflix’s video carousel with CSS only?
Vložit
- čas přidán 2. 08. 2024
- Sometimes it's fun to try and make something with CSS only. It might not be code you'd use in production, but that doesn't mean we can't learn a lot from doing it!
🎓 I'm working on a new course! beyondcss.dev/
🔗 Links
✅ The GitHub repo: github.com/kevin-powell/netfl...
✅ Kyles video: • Can I Create Netflix’s...
✅ More on :where(): • :where() - Remove the ...
✅ More videos in this series: • Cloning cool designs w...
⌚ Timestamps
00:00 - Introduction
01:21 - What we're starting with
03:22 - Making the general layout for the scroller
10:10 - Adding the arrows
15:24 - Adding the smooth scrolling
16:36 - Stop the arrows from sliding
23:00 - Styling the arrows
27:40 - Making the next/previous behavior work properly
33:56 - Getting the arrow to show when there is no target
35:11 - Fixing the arrows overflowing
37:32 - Showing that there is more content in the carousel
41:52 - The navigation indicators
48:49 - Fixing the button and indicators when nothing is targetted
#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 CZcams 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!
When you read the complicated CSS it's like some sort of Riddle from children book! Great video!
Your moment of fixing the overflow was super helpful. I love watching these videos and seeing you make and fix your errors. Thanks for what you do!
Hey Kevin, instead of clicking each element that you want to batch change; if you highlight the first one and use "ctrl+d" it will select the next matched element automatically. I've noticed you click select in several videos and thought it might help.
I use ctrl-d a lot actually, no idea why I didn't use it in this one. It's a life saver (ctrl+shift+L is awesome as well, but I always forget about it. Select every matching instance at once)
I alias alt+D to select every instance. Easier to associate
ctrl+F2 selects every instance. Looks like it works the same ctrl+shft+L
For over a year now I've watched your videos... For what felt like forever I rarely understood what you were doing. But as time goes on it's like it's all started clicking. So many dots connecting thanks to you. I know you don't got love for us WordPress folks, but we got lots of it for you!
I love this kind of videos where we see your thought process, really great!
I'm glad I found your channel early on in my Web Dev journey, you're obviously very talented, a true inspiration to aspire towards
my goodness, Kevin you are truly a legend, just in time when i really need for CSS course..
Kevin you sir are a CSS God! That selector was crazy! This was awesome stuff. Please make more such live problem solving stuff
Dude! This was cool. It encourages me to know that you have to figure things out in a similar way that I do. Great video!
I love these videos where you recreate catchy components/animation from famous websites
This is really good and I actually learned few new things from this project, my deepest wish is to have someone make videos centered around JavaScript alone just like KP make videos about CSS 🤦
Hello! Thanks for sharing videos like these. I’ve been doing paid dev work, including web app work, since 2000. I love modern CSS and JavaScript, and watching you work through a problem using CSS in real time is joyful. Thank you so much for sharing these videos.
Also, I don’t know what your day job is (assuming it’s not CZcams), but the ability to describe your reasoning while working is top tier mentoring / peer coaching skills.
Thanks a lot for the kind words 🙂. I worked as a teacher for 5 years doing live demos pretty much every day, so that *really* helped me develop that skill of talking through what I'm doing, and also trying to anticipate questions so I wouldn't have to stop as often during a demo, lol.
To be clear, the reason your initial attempt at :has(:not(:target)) didn't work is because you were misinterpreting it. You were reading it as "has no target", but what it really meant is "has any element which is not targeted". So it would apply the selector as long as there is at least one non-targeted child, which there always is, hence why it stayed on all the time.
yeah, it's going to take me awhile to get used to using :has(). After years of reading selectors in a very specific way, it's a bit of a change up that I confuse myself with.
What a great job! Kevin, you made my day!
Very nice and entertaining video Kevin!
Was very cool to see that one can solve such functions without javascript and sass.
Thanks
Learning css new tricks with real implementation is great , thanks KP sir... Do more !!!!
Oh, man. This was intense. I felt your happiness when that really worked out! Nice job. This could save countless kbs of non-necessary javascript code.
Hey Kevin, huge fan. Just letting you know this is EXACTLY something I've been looking for. Definately saving this to use for a side-scroll navigation bar I'm trying to build right now (modeled after Netflix's Tudum page). I'd go for buttons over scrolling any day.
The guy is so good he won't copy other videos. GOOD JOB, Like your tutorials!
I'm blown away by your videos 🤯
That parent selector in the end was brutal. Extremely valuable. I didn't know you could comibine :target with :not like that.
Really nice video, all the css stuff is great, but my favorite parte has to be when you said specificity right 😁
Great video Kevin! 🤩
Mate, that was impressive!
This is really impressive! I think CSS is grossly underestimated when it comes to what it can do. I only think with all those mega selectors, you start losing readability really quickly, to a point where the next morning you start asking yourself what you did there late last night 😉 So one question for me would be: When comes the point where you will go "heck, let's just use some few lines of js and be done with it"? Same thing for switching over to Sass or PostCSS etc. To my mind, this would also make an interesting video. Thanks very much for all your help on making at least my small corner of the internet a little bit more awesome!
Well done Kevin!
For the indicators without the has-selector.
I think you could use the svg inside a label pointing to a hidden radio button before the corresponding indicator and target it like that. Default the first radio to checked.
(didnt try it btw, so I could be wrong in my logic)
Hello. Thank you for this practical exercise. I see that there are many notions covered; this is very interesting. Philippe P.
I'm not even a web developer but I found this entertaining lol. Great vid.
Genial su trabajo Mr. Powell.! Muy agradecido de mi parte.
A la animación de mencionada en 48:36 bastaría agregar un "transition".
Lol how funny, I'm literally trying to level up as a javascript developer working with api's and choose to build a Netflix clone and I'm planning on building the carousel movie page once I'm done with the sign-in page which. However, I love your series on building things in css, so this well give me some good ideas on a different approach on building out my design for the movies, so thank you kevin for the awesome content. 😁🙌🏽
Really you are the goat of css
Hi Kev. I've been teaching myself coding and I have found it beneficial for me to try exploring the limits of HTML CSS and JavaScript before I even attempt the other add-on stuff.
I think you are more of an experienced and talented person to have pulled this off.
Hey Kevin thank you so much for your videos they help me a lot with my web projects. I had a question which I could find an answer for, should I use grid in the body tag to organize the general layout of the page or only for particular components?, thank you so much in advance, you are the best! 😀
Great video Kevin! And I think these videos showing your thought process are very helpful. I am still baffled by this selector
.media-scroller:has(:target:not(:first-child)) .media-group:first-of-type .next { display: none }.
If there ever was a CSS selector hall of fame, this should go there.
the auto generated subtitles say “friend and friends” and I like it this way
ah.. my needed dose of kevin
Very good, thank you
Truly the KIND OF CSS
The volume is up today, I can hear you over the ambient noise where I am
Love your videos man. I don't know about it's compatibility but I have found a cool trick while fiddling around with my background.
In 23:14 you added rgb(0 0 0 / 0.2) to make a black background with 20% opacity. But there's a much easier way to achieve the same thing.
Just using hex code #000 (only works with 3 digits though, I don't know how but you can convert your 6 digit hex codes to 3 digits if you don't care about the color being a precise hex code) with 2 (or the 0.x opacity you want) in the end and it does the same job.
for example :
#202020 with 4 percent opacity is #2224
#000000 with 2 percent opacity is #0002
it's pretty cool and makes creating transparent backgrounds so easy.
39:16 “I am so confused by these numbers”
Honestly Kevin. Aren’t we all 😂
Next video in Web Dev Simplified:
Can I create Netflix's video carousel with ONLY HTML? 😆😆
You are a Monster and Inspiration...
Gracias Mr. Powell
Para la última parte también me resultó:
.media-scroller:has(:not(*>:target)) .navigation-indicators>*:nth-child(1) {
opacity: 1;
transition: opacity 1000ms ease-in-out;
}
.media-group:nth-child(n):target~.navigation-indicators>*:nth-child(1) {
opacity: .5;
transition: opacity 1000ms ease-in-out;
}
.media-group:nth-child(1):target~.navigation-indicators>*:nth-child(1) {
opacity: 1;
transition: opacity 1000ms ease-in-out;
}
... resto del código...
Those selectors got pretty crazy
If we allow a single line of js on page load, we could target the first group with:
location.hash = "group-1";
I respect the fact that you have no problem in giving YT compatition as an example.
Also those Netflix chevrons, from a UX pespective, aren't the best solution, so I wouldn't copy'em 121.
...but, on that note, good job there.
That was impressive
media-scroller:has(:not(:target)) I think means that it contains at least one item that is not targeted. Which will always be the case with multiple children.
finally, you can clearly hear 'front-end' friends, not friend and friends.)))
Cool, Kevin , I have followed you channel for a while, it's really inspried me , BTW, i am kevin too. :)
And have you thought about to do like netflix, where are several rows of the carousel, beside slide the content horizontally, which can also roll in vertical to choose different rows ?
Thanks!
Thank you so much!
You can remove the ":has" from the scroll bar using pseudoelements, by having .media-group:target:nth-child(4)::after with the same position as the next button and a higher z-index.
You can remove the ":has" from the navigation indicators by using ".media-group:target ~" instead of ".media-scroller:has(.media-group:target)", which is basically the same thing you did for all bars, just not having the nth-child.
No has at all (works on firefox for me)
awesome
Impressive
Very cool
Love this video! How would you make this in different mobile views and only show so many slides per view?
Really missed sitting down to learn css with you kevin
I think you could do the navigation indicators without the :has by styling the first indicator to be opacity: 1 by default and reducing the opacity when any media-group past the first is targeted, e.g.
.navigation-indicators > *:nth-child(1) { opacity: 1; }
.media-group:target:not(:first-child) ~ .navigation-indicators > *:nth-child(1) { opacity: 0.5; }
You could do the same trick for the .next button on the first page but I think you'd have to move the first .media-group to be last and use something like grid-column: 1; to force it to layout in the first spot so that the sibling selector would be able to find the first page next button after the targeted page. Alternately you could move the previous / next buttons after of the .media-groups the same way the navigation indicators are.
Bro who needs Netflix when there is channels like this
To watch movies
Target, target, target… That’s make my day! #stilllearningfromthekevinmaster
Great Video, I wished you where able to find a solution around not needing to use :has but excellent work anyway :)
Hey Kevin, i recently started learning css and for my project i have to make a responsive design website and i have to use media queries to adjust for different screen sizes. I made the main page on a 1920x1080 display and i used the mozila dom to change the resolution then i tried to use:
@media only screen and (max-width: 3840px) and (min-width: 2561px) {} -to adjust font size and spacing for 4k
@media only screen and (max-width: 2560px) and (min-width: 2160px) {} - for 2k...
And i was planning to do it for 7-8 most common resolution ranges but for some reason after adding a few more media queries my site got all bugged and on almost all resolutions content was too zoomed in and spaced improperly. Is this like a really dumb way to do it or am i missing something? Btw for all size specs i used rem if that makes a difference. I'm a beginner so any advice would be greatly appreciated
Hey Kevin, great video as always! How can i make this responsive tho? Since "grid-auto-columns": is set to 100%, when i check on bigger screens, the image gets waay big. How can i maintain the proportion but without losing, for example, that "part" of the "next" image (showing that there's more content to the right)? Hope it makes sense, thanks again!!
`:has` has been my most anticipated CSS feature ever since I heard about it - and technically before it as well. I recently encountered a scenario in which it would be extremely useful, but had to use JavaScript to fix a entirely style-related issue(bluh)
This was really interesting. :has seems crazy, I wonder what the performance is going to be like though; Firefox apparently knocked back the suggestion 14 years ago saying that the implementation would be tricky & go against how every other selector works. Incidentally, if you had another carousel in here, would the solution break if you started :targeting things in a second carousel after panning partway through the first?
Yeah not sure if it would work with more than one.
As for the has(), it was long thought impossible because it could easily make recursive issues, but thanks to some of the advancements being made in CSS and some clever thinking, they found ways around that, luckily for us!
When someone says to me again that CSS is easy, I will link them this video. Holy moly it became complicated towards the end there. I think I'd rather learn Algorithms from scratch 🤣
Just kidding, CSS is awesome.
Hey Kavin, displaying next and previous buttons is not that hard we just need to give relative position to the .media-group class and that's it...
Thanks I learned a about grid form this video.♥
Hi Kevin, for the last issue,
Why didn't you use ".media-scroller:not(:focus-within) .media-group:first-child to display the arrows if no group is targeted ?
Because at the end if you click outside the scroller you display the first group any way or the target is still active ?
Because if I'm not working
Quick question:
When positioning the next and previous buttons why don’t you make the media-group position:relative?
That should then only appear on the selected group?
Doing this would indeed result in no overlapping buttons as they would stay in their own group, but this would reintroduce the issue of the buttons scrolling with the group as well.
Once you would click a next/previous button you would be able to see the buttons scroll in and out with the other media-group content.
@@mjcarsjens i guess you are right it would not mimic the style Netflix has. But it would make the code a whole lot easier.
I think you wanted :not(:has(:target)) instead of :has(:not(:target)) - doesn't have a targeted descendant instead of has a descendant that isn't targeted.
I was today years old when I realised that Kevin says "Hi there my frontend friends" in the intro. I always wondered why he says "Hi there my friend and friends" in his videos.
Too funny I thought the exact same thing!
Great tutorial. Can you implement the hover functionality? How the modal pop-up to show more information about the film please.
Yeah, thinking about doing that for a future video 😁
@@KevinPowell Great. Thanks in advanced king you're the best !! ✅
@@KevinPowell I would be really interested in seeing this as well. I've played around with something similar and had a very tough time scaling up the my version of the .media-element and getting that to behave nicely with the scrollable area. I think it would also be important to add a few more rows of .media-container elements to see how the scaled up .media-elements impact neighboring rows. Thanks for consistently great content.
That's it people, I think our king just got hired by Netflix and won't be making videos anymore 😂😂
I am VERY impressed, let's hope that selector gets mainstream quick 😱😍
If you had only done this but using dynamic elements, that is, without knowing the number of elements you are going to show, you would have gone from junior to semi
Could a display:none be set on all arrows, and then a display flex be set on .media-group:hover:where(.prev, .next)? Instead of targeting the media-container as the hover trigger. That way only the links related to that media group would be in the DOM and not all. A similar solution could also be used for the indicator (although each media group would need it's own indicator with the corresponding box set to opacity 1). You would have to use positive and negative margins so have the next group peaking through so you could still technically be hovering on the correct group? Removes the need for :has & even :target (I think). More CSS though
Whew! Complicated!
hi how r u? i have notice that if i put too many sections and when i click on next of any section the page it goes up i think it becuse the Hashtag#groub so is there any fix?
I stuck at making it responsive for mobile displays. media-query -> grid-auto-flow: row; -> .media-scroller { overflow-y: hidden;... but how do i set the height of the media-scroller to show 5 images an a little part of the sixt?
I don't object to the lesson (which is fantastic as always - thanks Kevin!), but I do object to all the video content services thinking that horizontal scrolling tiles with no keyboard or scrollwheel interaction is a good user experience for desktop users. Can anyone offer some clue as to why a vertically scrolled list wouldn't be vastly superior for large viewports?
Hey Kevin, can u make video on how to give padding on absolute element
You should be able to do it without any issues?
One way to fix the last issue at the end without the :has selector would be to do something like this
(.mg is short for media group and .ni is short for navigation indicator)
.ni{ opacity: 0.5}
.ni:first-child{ opacity: 1}
.mg:nth-child(2):target ~ .ni:nth-child(1),
.mg:nth-child(3):target ~ .ni:nth-child(1),
.mg:nth-child(4):target ~ .ni:nth-child(1){ opacity: 0.5 }
.mg:nth-child(2):target ~ .ni:nth-child(2),
.mg:nth-child(3):target ~ .ni:nth-child(3),
.mg:nth-child(4):target ~ .ni:nth-child(4){ opacity: 1 }
I know that it's a bit clumsy, but it avoids experimental features. For the next indicator from the first media group showing in the fourth, I'd probably just add a previous link to the first group that links to the fourth, and a next link on the fourth that links to the first media group. It would solve the issue as the first buttons are always on the bottom, and I think it also gives the user a better experience.
12:39 block elements like grid default to 100%, right?
Hej Kevin can you make a video about optimalize web page speed? How to load lazy CSS files, dont block resources another things that will improve Googles page speed insights?
@kevin Please do a video on fixing CSS related CWV issues.
Working on it, but it's a big topic! Making sure I do it right so it's taking awhile to put together.
@@KevinPowell Thank you. Appreciate so much all that you do.
where this icon svg use #next comes from?
How would you make this responsive though?
Hi Kevin, great video.
How about the code below:
.previous, .next {
display: none;
}
.media-group:hover > :where(.previous, .next) {
display: block;
}
Do you think this could be a much simpler solution in this case?
yeah, probably 😅
.card-group:target :where(.next, .previous) {
display: flex;
}
.card-group:first-child :where(:not(.previous)) {
display: block;
}
This 2 line of code can resolve easily the problem of not having nav arrow on first child and last child...
sorry its now... it was working on my computer so many time... but suddenly stoped working....
Thank you for this great tutorial. Is this responsive though? I'm sorry I wasn't able to sit through the whole video, just in case you did touch on the responsiveness in the video.
HELLO
EXCUSE ME ,
Is there a way to auto scroll-snap via css ?
THANKS , ❤ U From IRAN
Oh yeah.. Right now my school assignment is about html/css carousel.
We need kevin powell in c++ and python
Haha, that is *definitely* not my world, lol.
tbh just using radio buttons would have been cleaner and more dynamic
How would this be done between elements instead of groups? I've been trying to figure it out and it's friggen killing me
If you find my "horizontal media scroller" video, I do look at doing that, though I think you'd need to have a scrollbar preset. At least if you do it CSS only. With JS it'd be possible, I would think.
can you please share the svg code.
You should use "outline" instead of border
Does not work on Safari 15.4.
this code is not working properly in Safari?