I want you to teach everything, seriously. Your teaching style is so good and easy to follow.
@KevinPowell2 жыл бұрын
Thank you so much :)
@remkospaans2 жыл бұрын
Hadn't heard of Open props before, so yes, more explanation would be welcome. Thank you very much Kevin.
@Rico-cp4xp2 жыл бұрын
Open props seems like a game changer when it comes to quick prototyping. Would love to see a video on it!
@Jxerot2 жыл бұрын
yes me too! :)
@ishmartishtiaq3712 жыл бұрын
Yep
@nemethricsi2 жыл бұрын
+1
@brettmarshalltweaksource2 жыл бұрын
Same
@m3t4z0d2 жыл бұрын
me too!! pls do it for us Kevin
@ayitinya2 жыл бұрын
You literally just read my mind. Been looking for a tutorial like this. Much appreciation sir
@atrus38232 жыл бұрын
I always learn something new on this channel! I didn't know CSS supported snapping or that overflow scroll behaviour thing, which is handy. For the spacing not being related to the .snaps-inline class. What I always do in these cases is use the multiple class selector, e.g., .media-scroller.snaps-inline and put the property on that. This way, .snaps-inline can be reused and have specific padding (or no padding) for other types of elements. The snap padding also isn't mucking up the .media-scroller. It only applies where both classes are used. PS: I once made an HTML/CSS-only scroller/carousel (more like Netflix with prev/next buttons) with radio buttons and old school HTML/CSS. I used hidden radio buttons before each slide (2 before first slide and none before last slide... explained later) and used labels for the slides that pointed to the radio button before the previous slide. When you clicked on a slide, the before the previous slide would become selected. This way, I could use the :checked + .slide selector to select the previous slide, :checked + .slide + * + .slide to select the current slide, and :checked + .slide + * + .slide + * + .slide to select the next slide. Because each slide was a label, clicking the slide itself took you to that slide, so to have prev and next buttons, I simply had a bit of the previous and next slides showing before and after (respectively) the current slide. I would post the CodePen, but I don't want this comment flagged.
@KevinPowell2 жыл бұрын
Yeah, I'm thinking of doing something like that as a "next" step on this one actually... it's a fun exploration of CSS combinators and other things which, while it can be a little annoying, they're a fun way to learn. I always get lost within the selectors when making them though, lol. I was thinking of using links with :focus-within to move things around, but your approach might be better.
@mohammadabujaradeh69932 жыл бұрын
To be honest I am not fan of css but after following you for almost a year your are changing my thoughts on css and how enjoyable can be working on it , your videos ( not matter the topic ) is clear, easy to understand and supported with great examples . Well done Kevin. And same as everyone looking forward for open props too
@joshfriedman31672 жыл бұрын
Would love to see a video on open props. This is the first I'm hearing of it but definitely something that seems worth exploring!!
@frankdelange11222 жыл бұрын
Wonderful tutorial. I would love to see a part 2, where you get rid of the horizontal scrollbar (visually) on mobile and then add the desktop version with arrows. Netflix all the way.
@KevinPowell2 жыл бұрын
Yeah, thinking about doing a v2 with that, seems like a popular request 👍
@DomCos782 жыл бұрын
@@KevinPowell - as an iteration of that, I would love the horizontal scroll to automatically start scrolling when your mouse hovers over it and you use the scroll wheel. ie: no need to press shift and scroll and no need to grab the scroll bar. Without adding JS, the only solution I have found is to rotate the parent 90deg and then the child -90deg. BUT, I have not spent enough time figuring out the CSS to get it to look right. The function is there, it just looks....well....broken. Your insight would be amazing here!
@KevinPowell2 жыл бұрын
@@snehithreddy2684 not yet, no. Another 3-4 weeks probably
@dichen44952 жыл бұрын
@@KevinPowell It's been 8 weeks~
@hakeryk2 жыл бұрын
@@DomCos78 I was going to write the same request here - how to create this when your mouse is hovering on scroll then with scrolling down it would scroll right instead.
@piyusharyaprakash43652 жыл бұрын
Man love this tutorial, the fact that you explain what a particular css property does is amazing. Always needed someone to help me understand what a property actually does. I'll be visiting your channel every now and then for these css tips!
@sidharthanand99462 жыл бұрын
Wow. I was already working on creating a horizontal layout and was completely frustrated at not being able to create the way I thought. Thanks to Kevin for creating this video 👍
@vincentmesnige2 жыл бұрын
There's a little problem for your snaping scroll part for the "alone"' element, with the scroll-snap-align: start, when you're on the last item, you won't be able to snap to it, because it will snap to the "start" of the first element on the right. you need to add :last-child scroll-snap-align: end so you can snap on the last children ;) Doesn't bother the group part normally^^
@KevinPowell2 жыл бұрын
Oh, that's a good point 👍
@kristianulvund42742 жыл бұрын
This is giving me tears of joy at the moment. Thanks, Kevin🤩
@P1vko_BeatBrewer2 жыл бұрын
Yes please! I would gladly dive into watching video about open properties as well! Looks so helpful to boost creativity on projects!
@pinnaclewd11 ай бұрын
A great addition to any developer. Snap scroll is becoming the in thing requested by more and more clients.
@BigSmoke-r9w8 ай бұрын
All hail the CSS King! Thank you for this awesome tutorial good sir!
@semigodprogrammer2 жыл бұрын
Your videos helped me understand CSS better than my teacher tauth me, thanks a lot
@williamogburn78362 жыл бұрын
I've been coding for a little over six weeks now and your videos have really helped me stay encouraged. Thanks, Kevin!
@gbbarn6 ай бұрын
Did you make it?
@shinovar54652 жыл бұрын
This is crazy i was googling like crazy for a good video on this and I cant believe you ended up posting one right away the next day. I LOVE YOUUUUUU !!
@nathanhoskins4382 жыл бұрын
This is perfect! Needed to know how to do this and I love how you explain every step in detail. What if I wanted my media to be videos and open in lightbox?
@WhatAwinning2 жыл бұрын
I LITERALLY NEED THIS SAME THING
@shinovar54652 жыл бұрын
DUDE EVEN I LITERALLY NEEDED THIS EXACT THING! I was wondering why there isn't a single good video on this and BOOM! KP STRIKES
@joelinherts2 жыл бұрын
I was wondering just this morning how to implement snap horizontal scrolling. You’ve saved me a couple of hours work. Perfect timing!
@drewnorman36322 жыл бұрын
Nice work KP. Your tutorials make grid less scary. May the force be with you
@pranavyeole1022 жыл бұрын
oh heck yeah, we need a in-depth video on open props! seems really interesting
@JeremyChone2 жыл бұрын
So good. We have been doing grid for years, but still learn from your videos. Top content for any web app dev.
@AbdulRahman-wj9fw10 ай бұрын
I've been looking for a way to fix the column issue in the grid carousel for ages now! You solved it perfectly. Very nice explanation. Loved your JS tutorial for carousel, it's so nice to understand what each code means!
@avinchaudhary10074 ай бұрын
Kevin Powell is the goat of html and css......thank you sir for providing free content on youtube ......hope you will provide us more content on youtube
@ecological64542 жыл бұрын
Kevin is one of those Chad's who strive to improve the lives of many.
@thecoderabbi2 жыл бұрын
I will definitely try this out when I can. Love you Kevin!
@solaraproject3614 Жыл бұрын
Bro, you saved my life! i was about to end it cause i couldn't, for the love of God, get the videos to fit properly in the container and it was acting very weird whenever i change display and position to get them in line. Thanks again yo! you the man Kevin!
@tedsemon13262 жыл бұрын
Wonderful video Kevin, I learned a lot. You explain things very clearly, not only to show us how to do something but telling us why we might want to do something too.
@wendyhoile76592 жыл бұрын
Yes Please to Open Props!!! Also thank you for this video. I made one by accident a year or so ago with flexbox, but of course the whole page moved. Now I know what to do. Thank you Kevin
@gb762312 жыл бұрын
the level of excitement that i felt when i saw this video's thumb really tells me that i got my career choice right :)
@dave60122 жыл бұрын
I struggled with scroll snap until I gave up on it. Thank you for demystifying! 🙌🙌
@cesarimura33982 жыл бұрын
Oh my god, was looking for it yesterday, you are the man Kevin, thank you so so much!
@justinjoka50192 жыл бұрын
Perfectly what i needed made me fall in love with CSS even more
@DanteMishima2 жыл бұрын
Yes! Please, an open prop would be greatly appreciated
@Rallosz2 жыл бұрын
It's like you read my mind; I've been thinking about this for a few days now! 👀
@m3t4z0d2 жыл бұрын
Yeah, and again you made a video just about what i was needing. Thx Kevin. I love to learn with you
@ayushgogna97322 жыл бұрын
what a perfect guy you are you are using some css I didn't ever hear the name that these properties exist the work you put and its in your brain is like amazing
@natalieacevedo45752 жыл бұрын
Kevin thanks so much for your awesome job and teaching style. I have learned sooo0 much from you, hands down the best teacher of youtube.. greetings from Portugal! 😘
@RaveKev2 жыл бұрын
Yeah, an Open Props video would be great!
@merko30432 жыл бұрын
I always learn something new when I watch your videos. Thank you and keep it up! :)
@sicktastictv2 жыл бұрын
As always, great video Kevin!
@SebastianZartner2 жыл бұрын
Can't give this video enough thumbs up. 😀There is so much useful information regarding horizontal scrolling, grid layout and scroll snapping.
@shaystibelman2 жыл бұрын
wow, so many new properties I have to Google now! jesus, inline-size!? wtf! thank you so much!
@chetanjain46162 жыл бұрын
Great Video Kevin, one thing that was missing was scrolling feature where you scroll vertically but that section moves horizontally
@FeryRohrer2 жыл бұрын
Yes that would be great, but I guess for this there would hav to be some JavaScript involved
@KevinPowell2 жыл бұрын
I wouldn't do that because it can be *really* annoying for users. I know it's "easier" in a sense, specially since most users don't know you can horizontally scroll with shift + mouse wheel, but scroll-jacking in general is a dark pattern. I'd rather use JS to add a next and previous button.
@FeryRohrer2 жыл бұрын
@@KevinPowell Wold it be possible to give us an idea on how to achieve this next and previous buttons with JS? Thanks for your super great content, I really enjoy your videos a lot 👏👏👏
@Sixthfred2 жыл бұрын
I really like your videos Kevin, am starting to fall in love with css!
@hanesmitter14692 жыл бұрын
How may I hide that horizontal scrollbar but still be able to scroll horizontally?
video is great, if anyone is following this video without open props, remember to add on img { max-inline-size: 100%; }
@adityaprakash50932 жыл бұрын
Thank you Kevin!! This video really helped me with a challenge I have in my project!
@thiernodem56819 ай бұрын
if you want to remove the horizontal scroll bar, do this div::-webkit-scrollbar{ display: none; }
@youtindia2 жыл бұрын
It's really cool. That been said, if you make say left and right button which scrolls the slider to left and right then there won't be any smooth scrolling effects in Safari. Safari does not support smooth scrolling so it will directly jump to next and previous on button press. That's the reason why in most cases we unfortunately cannot use this in production because these scrollers are usually tired with next/prev buttons and Safari messes that up. Safari is the new IE.
@KevinPowell2 жыл бұрын
scroll-snap and smooth-scrolling behavior are very different, scroll-snap is supported in Safari :)
@sebastianmihaiprisacariu89756 ай бұрын
Would be interesting to see how you would add arrows to this, although that probably isn’t css related.
@cloudart40702 жыл бұрын
Thank you sir I always problem faced with horizontal scrolling .
@bishwajeetpandey15702 жыл бұрын
I could not stop myself to subscribe your channel. Thx for this content 🙏
@twinconceptsdesign2 жыл бұрын
An explainer video on open props would be highly appreciated 👍. As always great tutorial
@stephenchiou55052 жыл бұрын
Thanks for the great video again! You never disappoint. Would love the open prop video as well~
@GotMoreCakes2 жыл бұрын
The next part of this could be demonstrating increasing the size of a hovered element and not falling foul of overflow-y issues on the 'tracks' above/below. Netflix (desktop) use a modal approach, but don't have drag scroll. Amazon use nested overflows with weird magic number margins.
@onnot7012 жыл бұрын
YES please video on open props
@OryginTech2 жыл бұрын
Do you recommend open props for production code? Seems like a great tool to be using in industry not just for prototyping
@prsmahajan2 жыл бұрын
East to the west, Kevin remains always the supa best😍
@marcelo257582 жыл бұрын
Omg just the other day I hoped you'd make a video about this!!
@chizidotdev2 жыл бұрын
At 1:00 he’s right tho... He really does make you fall madly in love with CSS...
@mpumelelo6552 жыл бұрын
Let's gooooo open-props!!!!
@sumitkkundu2 жыл бұрын
Hi Kevin! Great tutorial as usual. I have only one question. Currently we need to do left and right scroll by dragging the scrollbar. Can we achieve this by normal mouse scroll just like vertical scroll? Please give us a css only solution on this. Thank you!
@DenisForigo Жыл бұрын
I am looking for this solution a long time...
@063_muhammedrinshadsr6 Жыл бұрын
that was soo good it solved my problem within first 8 minutes thankyou soo much (note : But i watched the whole video :) )
@lalit-singh-bisht Жыл бұрын
but how did you hide that scrollbard beneath
@cdey38862 жыл бұрын
Thanks, I really learnt a lot and I appriciate you channel and videos very much! P.S: 3:32 I love how you said "auto", and I don't know why.
@KevinPowell2 жыл бұрын
haha, the fun of slowing down a little as you type words out, lol
@TenderHooligan10 ай бұрын
how about if you want to be showing the center of the media scroller by default? i used justify-content: center which worked, but im getting an issue where i cant scroll leftwards
@bsully752 жыл бұрын
I would definitely like to see a video from you on open props
@crowebro95812 жыл бұрын
Thank you for this! I esp loved the open props. I def want to see that video. Ok, let's face it. I love all of your videos but as far as learning is concerned, that would be the next logical bit of information for me to learn.
@grgvgrgv2 жыл бұрын
I'm studying JS and I just need to make such a scroll. I can imagine the algorithm, but I haven't done it yet. I'll watch the video now :) Greetings from Moscow :)
@privateinvestigationenterp44032 жыл бұрын
This is good. What happens when you want to populate videos in the slider? I see photos, but
@sabuein2 жыл бұрын
Thank you, Kevin.
@IAmSamuelCharpentier2 жыл бұрын
For the 25% bit, I would make a container on which controls (buttons with arrows for example) are also child of and make that container have margin, with the controls positioned absolutely in that margin. On top of that, the next item would show underneath the controls, so 25 % would be a fine size imo.
@hassaneoutouaya2 жыл бұрын
THANK YOU SO MUCH 23:00 :This is a code if you want to debug your CSS such as highlighting margins paddings outlines.... you need just to override the CSS file to debug //CSS Debugger *:not(path) { color: hsla(210, 100%, 100%, 0.9) !important; background: hsla(210, 100%, 50%, 0.5) !important; outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important; box-shadow: none !important; }
@universalponcho2 жыл бұрын
This was super helpful. Cheers.
@malikd.mcnish64822 жыл бұрын
hey great vid but if you could preview the end result of the website or design at the starting of your video would be great, it gives us more reference in what we making, Thanks again Kev.
@renebesicke2 жыл бұрын
Awesome content again! :D
@andrekrug92152 жыл бұрын
Thanks Kevin!!! You help me so much! thanks lot!
@polygonstorm44672 жыл бұрын
Brutal tutorial!
@peterlabos5956 Жыл бұрын
Personally I think horizontal scrollers still need a lot of javascript to be usable. In Chrome if you click on scrolbar gray area it will flash through all the elements to the end. This can have bettter behaviour with a "scroll-snap-type: inline proximity". But that only works for a group example and could be buggy if list is loading/adding new items through JS. Another drawback is mouse drag behaviour on laptops. If you don't have 3D wheel mouse (most people don't) you are able to scroll sideways by hitting SHIFT + mouse wheel. And very few people will hit SHIFT + mouse wheel on computer.
@MrXandrios2 жыл бұрын
Nice, never new about, this is possible without js! Many thanks here
@brickwarsnet2 жыл бұрын
Hey Kevin - I loved your tutorial. I'm curious if there is an easy way to implement forward and backward buttons. The reason for this is I like the look of a thinner horizontal scrollbar on mobile in addition to the swipe gesture. However, you're forced to use the scrollbars on desktop views and if I make them thinner, they are more difficult to grab. It would be nice to overlay larger forward and backward buttons on top of the div for some additional accessibility. I've looked into scrollToLeft, scrollToRight with simple onclick buttons - but was curious if you could point a resource that would work in conjunction with horizontal scrolling.
@D7460N2 жыл бұрын
I'm sooooo going to use this! Thank you!
@Kristina-zi2lo2 жыл бұрын
Pls Create a video about Email Signature how to create that in css
@KevinPowell2 жыл бұрын
I think I mentioned in a comment on another video that it's not something I really do. email in general scares me, lol, specially because we're so limited in the CSS we can do. I have plans for some content down the line email related that might help out, but it might be awhile
@cookedpotato2 жыл бұрын
@@KevinPowell we will wait :)
@twistedmetal78822 жыл бұрын
open props video squad
@Stoney_Eagle2 жыл бұрын
Open props is kinda like tailwind but it's used in css instead of html. Pretty neat! Have I been putting to much effort in creating my Netflix style scroller 🤔🤯
@orrodrigez5051 Жыл бұрын
Thanks man! This video is awesome. Any way to style this scroll bar?
@user-ms8ei9le7x2 жыл бұрын
Kevin thanks , the nice lesson 🎓
@ajaypawar9472 жыл бұрын
Sir, Please make video on Font-size issues comparing crome and firefox and how to fix it
@wings_kai111oninstagram62 жыл бұрын
👆👆 you can reach out to👆 he can help you out he's smart, fast, trustworthy and reliable
@adamsDevArt Жыл бұрын
amazing thanks a lot kevin!!
@johanstam3602 Жыл бұрын
Could you do a vid if there is a slider in a container with overflow on the right?
@novanoskillz41512 жыл бұрын
thanks... is there a video where you remove the scrollbar??
@marcusunivers2 жыл бұрын
Awesome Tutorial. 😊👍 I have one question to this: How I can make it behave that after I scroll to the end on the container, the entire page scrolls normal down again?
@sergejstojanovic25182 жыл бұрын
I needed this like 2 days ago. It's like You hear me XD thanksn
@shadow-bm5wj2 жыл бұрын
Is there any way to move the focus onto the element that has been snapped to? Because there is an issue when navigating with the keyboard. Scrolling horizontally using arrow keys work nicely, but then pressing tab will take you back to the element that had the focus before which can mess up the snapping behaviour.
@detroitluv822 жыл бұрын
this is awesome! I just need to make it responsive with different image sizes for mobile and desktop
@verastegui64 Жыл бұрын
Hey Kevin, I love this tutorial. Got one question: how do I prevent the entire body from unintentionally horizontally scrolling. It is not hugely obvious in desktop, but in mobile is way too distracting when scrolling. Hope you can answer my question. Thanks!
@raptorvenom7983 Жыл бұрын
a little late but try using overflow-x: hidden on your body element :)
@justkailash Жыл бұрын
Awesome tutorial.... you always rock....
@cristiannass394510 ай бұрын
Thank you for the tutorial. I have a question though: In mobile view, when I touch and drag to the left or right, I want to shift just one image to either side, regardless of how hard I drag. Is there a way to achieve this (Please help me I have to finish this task ASAP)
@nosolocodigos Жыл бұрын
Could you add to icons at each side? To scroll with the arrows icon left and right?