The thing I like about your videos is that you always do something that we could use in our real world projects.... I follow many other web developer youtubers but the content I find in your videos, I found in none... Thank you very much sir😊😊
U creat problems in your head and then make tutorials oh I think of 200px shadow and it's a problem. Who gives 200px shadow? There is command margin . 3:25
@@KevinPowell One of the reason i'm not using that trick and i add elements (an overlay) anyhow is because i need the shadow part to be clickable/triggering cancel/close events.
Given the sheer volume of content providers on TH-cam it is difficult to create one's own style, while delivering quality content at the same time. You have achieved both.
Another fun hack is that since the box-shadow starts at the edge of the box, so you can use a transparent div to create a window through a dark screen to the content below. Then absolute position and size your window to put it over content you want to highlight.
These tricks are really handy. Specially that modal one. Thanks a lot man. No I can save my mark up a lot and my code will be more optimized. I really appreciate your teaching, very understandable and easily explained. Thanks again for making these awesome videos. I can learn a lot.
i found that you can use box-shadow to make your buttons look like they are actually being depressed. you can make this effect by putting a box-shadow on your button then use the :active pseudo class and make the box-shadow offsets and spread smaller values....and can take it even one step further by using the transform: scale() to make it slightly smaller to like .9 or .95
The negative z-index makes the elements invisible… I think, unless you set a positive z-index on the parent element as well. I think setting isolation to isolate on the main element also makes it work..
I love this kind of creative geekery. It's probably unintentional, but I've noticed in more than one video you refer to "vertical width" instead of "viewport width." Unless I'm missing something.
Hi Kevin, I liked the page peel effect, however using z-index is problematic for me, as it conflicts with other elements (basically its behind EVERYTHING). Do you know of a hack to solve this one? :O
You can give the parent element a position: relative; That should change it's layering context (z-indexing is weird). You can layer the parent, and then it's pseudo elements are only z-indexed in relation to it, and not everything else (sort of). And very poorly explained by me here, hopefully it makes sense.
Video Request! Can you please do the next video on pure vanilla js slider(with slding transition) with navigation dots and prev next button without using any of those plugins like wow slider or owl carousel. Part one a full carousel header slider...and part 2 a content slider with 3-4 boxes in view at a time.
Hey Kevin, thanks for this great tutorial. I just tried the peeling box shadow effect on my project. It works like a charm. Only when I hover the box itself with box:hover {transform: translateY(-10px) scale(1.05)}, the box::before and box::after are stacked on top of the box even though they have the z-index: -1. Here's the code: codepen.io/oceandiveloper/pen/ZMBLZb I read about the stacking context of transforms but I'm still not really sure what to do to solve this. Do you have a fix for that? Cheers, Kevin
Stacking context can be annoying. I do have a video on it that might help (ill link it at the end here, cause a bit of a long answer). When you put the :hover effect on your .box, it has a transform on it, and that transform gives your .box a new stacking context. So now, the ::before and ::after are not stacking according the the document's stacking context (where the -1 z-index will push them backwards), but will instead push it to the back of this new stacking context, so the only thing they are now behind is the h1 inside your box. Which is terribly annoying. Here is my video: th-cam.com/video/uS8l4YRXbaw/w-d-xo.html
I have this video that sort of looks at the basics of it cool gamer: th-cam.com/video/P6UgYq3J3Qs/w-d-xo.html and this one where I do some more stuff with it: th-cam.com/video/lUaw-AA9HnA/w-d-xo.html Hopefully Jos van Weesel's been able to help you out, but if you have any questions let me know :)
I just wanted a really big value. It could be smaller, but you could set it to 1000vw and get the same result. Shadows won't cause any overflow issues, so if you want to cover the entire space, why not overshoot it?
I did a little analog clock project where the shadow changes with the moving hands for a realistic effect. It is very subtle but I think it works well. It uses JS and a little trigonometry. I’d like to have done this with purely CSS, but I don’t think it would be possible. I’d love someone to prove me wrong... dcenatiempo.com/cit-261/clock/
For some very basic proof of concept, I threw this together: codepen.io/kevinpowell/pen/ermOwV It's far from perfect as far as positioning things, I was more worried about the animation than anything else. I stole the shadow animation that you created, very nicely done with the viewport units in there, really dig that a lot!
U creat problems in your head and then make tutorials oh I think of 200px shadow and it's a problem. Who gives 200px shadow? There is command margin . 3:25
The thing I like about your videos is that you always do something that we could use in our real world projects.... I follow many other web developer youtubers but the content I find in your videos, I found in none...
Thank you very much sir😊😊
Thank you so much for the kind words, and I'm really glad you're finding a lot of value in my videos! Thanks so much 😊
U creat problems in your head and then make tutorials oh I think of 200px shadow and it's a problem.
Who gives 200px shadow?
There is command margin . 3:25
The modal shadow trick is really cool, thank you.
No problem at all, glad you liked that one :).
@@KevinPowell One of the reason i'm not using that trick and i add elements (an overlay) anyhow is because i need the shadow part to be clickable/triggering cancel/close events.
@@kirkanos771 good point.
So much learnt thank you
Wooooow! This is the best box shadow series.... making them all inset to not affect the box model was a genius idea.....
This video was definitely my cup of tea. Thank you very much. Cheers!
Absolutely love the Peel effect. Thank you for showing how to get this done.
thank you kevin. my confidence keeps getting better with your videos. much appreciated
That's great to hear Christopher! Keep it up 👍
I never understood css this good in past year as much I learned from your channel in just 1 month.
Given the sheer volume of content providers on TH-cam it is difficult to create one's own style, while delivering quality content at the same time. You have achieved both.
Wow, thank you so much kamaboko1! I really appreciate it!!! 😁
Wow, the modal hack it's really amazing. Thank you
Pretty surprised I did just found your channel! I like these great little things which are very useful in real-word building bigger things!
thks. I learned just another cool things about box-shadow's functionality + features!
Oh maaaan the peeled corners effect it pure genius!!! Loved this series, thanks Kevin.
It's 2021 and here I am searching "Kevin Powell box-shadow prop", thanks to Kevin for all the amazing content!
Beautfiul! Always wondered how that peeled corner effect was made.
I am so glad I came across your channel . Thank you.
Thanks a lot. I have learnt a lot about box shadow from your box shadow series.
Glad to hear that you've learned a lot 👍
Another fun hack is that since the box-shadow starts at the edge of the box, so you can use a transparent div to create a window through a dark screen to the content below. Then absolute position and size your window to put it over content you want to highlight.
man, it's amazing how much I learn from watching your videos.. this video was top notch! Thank you so much!
Thank you!
Your videos are truly the best I've seen. They are very helpful.
As usual, as very useful video on how we can improve presentation. Many thanks 👍
thanks so much for your effort, your videos are awesome, definitely my favorite webdev youtuber
Thank you for this great lesson, the modal and the last trick are very useful.
Thank you Kevin!
GENERAL KENOBI. YOU ARE A BOLD ONE
Awesome. Thanks Kevin.
Glad you liked it Marek :D
Awesome video as usual!
your channel is a goldmine
These tricks are really handy. Specially that modal one. Thanks a lot man. No I can save my mark up a lot and my code will be more optimized. I really appreciate your teaching, very understandable and easily explained. Thanks again for making these awesome videos. I can learn a lot.
Thanks ! I'll be sure to use them more often :)
Really good video and explanation, thank you Sir, hope we can get more like this creative videos
Very helpful for Beginners.. thanks man!👍
Glad you liked it :D
thanks kevin it's pretty mini course on box shadow property . i hope u do more on border radius and gradient background .thanks again
I've got some things lined up for gradients, should be about a month or so away :D
REally AWesome!
Thanks!
Very Professional!!!
i found that you can use box-shadow to make your buttons look like they are actually being depressed. you can make this effect by putting a box-shadow on your button then use the :active pseudo class and make the box-shadow offsets and spread smaller values....and can take it even one step further by using the transform: scale() to make it slightly smaller to like .9 or .95
The negative z-index makes the elements invisible… I think, unless you set a positive z-index on the parent element as well. I think setting isolation to isolate on the main element also makes it work..
I recently used box shadow to create an aperture effect. I made an invisible circle with a giant black shadow. I thought it was pretty neat
I love this kind of creative geekery.
It's probably unintentional, but I've noticed in more than one video you refer to "vertical width" instead of "viewport width." Unless I'm missing something.
Yup, I say vertical sometimes and don't catch myself.... My brain gets caught up on that "v" :\
king of css
15:51 I loved it.
Do gradients work on box shadows?
Awesome
Hi Kevin, I liked the page peel effect, however using z-index is problematic for me, as it conflicts with other elements (basically its behind EVERYTHING). Do you know of a hack to solve this one? :O
You can give the parent element a position: relative; That should change it's layering context (z-indexing is weird). You can layer the parent, and then it's pseudo elements are only z-indexed in relation to it, and not everything else (sort of). And very poorly explained by me here, hopefully it makes sense.
Kevin Powell thanks! Will give that a try
done
"You need that? No."
box-shadow on a modal-element is pretty useless besides the looks, because you still can interact with your page "behind" the dialog
Video Request! Can you please do the next video on pure vanilla js slider(with slding transition) with navigation dots and prev next button without using any of those plugins like wow slider or owl carousel. Part one a full carousel header slider...and part 2 a content slider with 3-4 boxes in view at a time.
Definitely won't be the next video, but I could look at doing something like that in the future!
Hey Kevin,
thanks for this great tutorial. I just tried the peeling box shadow effect on my project. It works like a charm. Only when I hover the box itself with box:hover {transform: translateY(-10px) scale(1.05)}, the box::before and box::after are stacked on top of the box even though they have the z-index: -1.
Here's the code: codepen.io/oceandiveloper/pen/ZMBLZb
I read about the stacking context of transforms but I'm still not really sure what to do to solve this. Do you have a fix for that?
Cheers, Kevin
Stacking context can be annoying. I do have a video on it that might help (ill link it at the end here, cause a bit of a long answer). When you put the :hover effect on your .box, it has a transform on it, and that transform gives your .box a new stacking context. So now, the ::before and ::after are not stacking according the the document's stacking context (where the -1 z-index will push them backwards), but will instead push it to the back of this new stacking context, so the only thing they are now behind is the h1 inside your box. Which is terribly annoying.
Here is my video: th-cam.com/video/uS8l4YRXbaw/w-d-xo.html
Neat
I don't understand why when I copy this into an HTML/CSS file it doesn't work for me. The before/after don't show at all...
If I add a rotate(0deg) to the parent it does though
+ Shadows...yeah, i know how to use shadows...
- And then you can do this, or, if you want, you can do this...
+ Wait, what was that sorcery?
Haha, glad that the video wasn't a waste of time :)
can you make a video describing position???
i am really confused about this
well i want make a portfolio site.The nav bar is creating the problem..
do you have any facebook id???
I have this video that sort of looks at the basics of it cool gamer: th-cam.com/video/P6UgYq3J3Qs/w-d-xo.html and this one where I do some more stuff with it: th-cam.com/video/lUaw-AA9HnA/w-d-xo.html
Hopefully Jos van Weesel's been able to help you out, but if you have any questions let me know :)
thank you.your video is helping me a lot.
Ditto
1 000 000 $ Man!
Thanks E K :)
7:20
ONE HUNDRED VERTICAL WIDTH?!?
I just wanted a really big value. It could be smaller, but you could set it to 1000vw and get the same result. Shadows won't cause any overflow issues, so if you want to cover the entire space, why not overshoot it?
@@KevinPowell But you said VERTICAL WIDTH instead of VIEWPORT WIDTH
I did a little analog clock project where the shadow changes with the moving hands for a realistic effect. It is very subtle but I think it works well.
It uses JS and a little trigonometry.
I’d like to have done this with purely CSS, but I don’t think it would be possible. I’d love someone to prove me wrong...
dcenatiempo.com/cit-261/clock/
For some very basic proof of concept, I threw this together: codepen.io/kevinpowell/pen/ermOwV
It's far from perfect as far as positioning things, I was more worried about the animation than anything else.
I stole the shadow animation that you created, very nicely done with the viewport units in there, really dig that a lot!
Thanks. Yeah its funny, It turned out being a lot more complex project than I imagined at the start.
also teach javascript like this example
I don't know where to start with JS! It's a much bigger topic than CSS, I never really know how to approach it.
You should check out stackblitz.com. It is an awesome development tool. As always, thank you for videos.
That looks really cool, thanks for sharing it summon shresth!
I wish I could intern for you.
1st comment 😂😂
U creat problems in your head and then make tutorials oh I think of 200px shadow and it's a problem.
Who gives 200px shadow?
There is command margin . 3:25
Awesome