3 Box Shadow Tricks You MUST Know
HTML-код
- Опубликовано: 17 апр 2018
- Box shadows can make things look nice, but they can also be used in unusual ways to pull off some fun effects as well!
In this video, I look at three hacks that you can use with box-shadow: faking multiple borders, a modal 'background' with no extra markup, and a peeled corners effect.
Codepen: codepen.io/kevinpowell/pen/XE...
---
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
Support me on Patreon: / kevinpowell
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 RUclips channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
![PIECE BY PIECE - Official Trailer [HD] - Only In Theaters October 11](http://i.ytimg.com/vi/7Bc6trBc1kc/mqdefault.jpg)
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
Absolutely love the Peel effect. Thank you for showing how to get this done.
This video was definitely my cup of tea. Thank you very much. Cheers!
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.
Beautfiul! Always wondered how that peeled corner effect was made.
Your videos are truly the best I've seen. They are very helpful.
Pretty surprised I did just found your channel! I like these great little things which are very useful in real-word building bigger things!
Wooooow! This is the best box shadow series.... making them all inset to not affect the box model was a genius idea.....
Thank you for this great lesson, the modal and the last trick are very useful.
I am so glad I came across your channel . Thank you.
man, it's amazing how much I learn from watching your videos.. this video was top notch! Thank you so much!
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.
Wow, the modal hack it's really amazing. Thank you
As usual, as very useful video on how we can improve presentation. Many thanks 👍
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 👍
Given the sheer volume of content providers on RUclips 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!!! 😁
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.
Thank you Kevin!
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.
It's 2021 and here I am searching "Kevin Powell box-shadow prop", thanks to Kevin for all the amazing content!
Thanks ! I'll be sure to use them more often :)
thanks so much for your effort, your videos are awesome, definitely my favorite webdev youtuber
Awesome. Thanks Kevin.
Glad you liked it Marek :D
Thank you!
Really good video and explanation, thank you Sir, hope we can get more like this creative videos
Awesome video as usual!
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
your channel is a goldmine
Very Professional!!!
REally AWesome!
Thanks!
GENERAL KENOBI. YOU ARE A BOLD ONE
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
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
Awesome
Do gradients work on box shadows?
15:51 I loved it.
king of css
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
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" :\
Neat
done
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!
box-shadow on a modal-element is pretty useless besides the looks, because you still can interact with your page "behind" the dialog
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: ruclips.net/video/uS8l4YRXbaw/видео.html
"You need that? No."
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
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: ruclips.net/video/P6UgYq3J3Qs/видео.html and this one where I do some more stuff with it: ruclips.net/video/lUaw-AA9HnA/видео.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.
+ 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 :)
1 000 000 $ Man!
Thanks E K :)
Ditto
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.
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
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!
1st comment 😂😂
I wish I could intern for you.
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