3 Box Shadow Tricks You MUST Know

Подписаться 907 тыс.

Просмотров 68 тыс.

50% 1

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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

17 апр 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 98

@sumankathet2560 6 лет назад

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😊😊

@KevinPowell 6 лет назад

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 😊

@ayazaslam1362 2 года назад

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-Average-Gamer 6 лет назад

The modal shadow trick is really cool, thank you.

@KevinPowell 6 лет назад

No problem at all, glad you liked that one :).

@kirkanos771 3 года назад

@@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.

@Nerwesta 3 года назад

@@kirkanos771 good point.

@kelvinclark3474 3 года назад

So much learnt thank you

@jennyjanssen1499 3 года назад

Absolutely love the Peel effect. Thank you for showing how to get this done.

@bloxzyo 2 года назад

Wooooow! This is the best box shadow series.... making them all inset to not affect the box model was a genius idea.....

@josema-boy7610 5 лет назад

This video was definitely my cup of tea. Thank you very much. Cheers!

@kamaboko1 5 лет назад

Given the sheer volume of content providers on RU-vid it is difficult to create one's own style, while delivering quality content at the same time. You have achieved both.

@KevinPowell 5 лет назад

Wow, thank you so much kamaboko1! I really appreciate it!!! 😁

@christopherikpat5512 6 лет назад

thank you kevin. my confidence keeps getting better with your videos. much appreciated

@KevinPowell 6 лет назад

That's great to hear Christopher! Keep it up 👍

@shubham0638 5 лет назад

I never understood css this good in past year as much I learned from your channel in just 1 month.

@tomchrist4908 3 года назад

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.

@congalala6777 4 года назад

Your videos are truly the best I've seen. They are very helpful.

@ralexand56 5 лет назад

Beautfiul! Always wondered how that peeled corner effect was made.

@Nikkupikku123 5 лет назад

I am so glad I came across your channel . Thank you.

@miloskostic2239 5 лет назад

Thank you for this great lesson, the modal and the last trick are very useful.

@moczikgabor 4 года назад

Pretty surprised I did just found your channel! I like these great little things which are very useful in real-word building bigger things!

@nitram_nosnibor 3 года назад

Oh maaaan the peeled corners effect it pure genius!!! Loved this series, thanks Kevin.

@thomasmeiller4455 5 лет назад

thks. I learned just another cool things about box-shadow's functionality + features!

@FilipeFreire 4 года назад

man, it's amazing how much I learn from watching your videos.. this video was top notch! Thank you so much!

@sevketiskender3229 5 лет назад

Thank you Kevin!

@Ninjer 4 года назад

GENERAL KENOBI. YOU ARE A BOLD ONE

@andreaskarz 2 года назад

Wow, the modal hack it's really amazing. Thank you

@Morrile1 5 лет назад

As usual, as very useful video on how we can improve presentation. Many thanks 👍

@SazikimiJaeger 5 лет назад

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.

@seize2581 4 года назад

Thanks ! I'll be sure to use them more often :)

@suthakharponnambalam9836 2 года назад

It's 2021 and here I am searching "Kevin Powell box-shadow prop", thanks to Kevin for all the amazing content!

@AmirulIslam-gg2fn 6 лет назад

Thanks a lot. I have learnt a lot about box shadow from your box shadow series.

@KevinPowell 6 лет назад

Glad to hear that you've learned a lot 👍

@CarAudioInc 3 года назад

thanks so much for your effort, your videos are awesome, definitely my favorite webdev youtuber

3 года назад

Really good video and explanation, thank you Sir, hope we can get more like this creative videos

@Ben.Jacobsen 3 года назад

Thank you!

@JacoblBroughton 4 года назад

your channel is a goldmine

@LanFeusT23 3 года назад

Awesome video as usual!

@mareksawinski8225 6 лет назад

Awesome. Thanks Kevin.

@KevinPowell 6 лет назад

Glad you liked it Marek :D

@ridaazzabi3233 4 года назад

Very Professional!!!

@nagahumanbeingzooofparticl8836 6 лет назад

Very helpful for Beginners.. thanks man!👍

@KevinPowell 6 лет назад

Glad you liked it :D

@curtreyes00 5 лет назад

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

@abdelmonaemshahat412 6 лет назад

thanks kevin it's pretty mini course on box shadow property . i hope u do more on border radius and gradient background .thanks again

@KevinPowell 6 лет назад

I've got some things lined up for gradients, should be about a month or so away :D

@nathancornwell1455 4 года назад

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

@hattorihanzo5707 2 года назад

king of css

@webdesigner8904 6 лет назад

REally AWesome!

@KevinPowell 6 лет назад

Thanks!

@morningfreeman 5 лет назад

Awesome

@UrraSergio 5 лет назад

15:51 I loved it.

@clevermissfox 6 месяцев назад

Do gradients work on box shadows?

@fatach22 6 лет назад

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

@KevinPowell 6 лет назад

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.

@fatach22 6 лет назад

Kevin Powell thanks! Will give that a try

@joeldcanfield_spinhead 4 года назад

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.

@KevinPowell 4 года назад

Yup, I say vertical sometimes and don't catch myself.... My brain gets caught up on that "v" :\

@kevinrichter9397 5 лет назад

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

@KevinPowell 5 лет назад

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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uS8l4YRXbaw.html

@gosnooky 3 года назад

Neat

@nikhiltyagi2223 6 лет назад

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.

@KevinPowell 6 лет назад

Definitely won't be the next video, but I could look at doing something like that in the future!

@braveshine2579 2 года назад

done

@fufumitgemuese 4 года назад

box-shadow on a modal-element is pretty useless besides the looks, because you still can interact with your page "behind" the dialog

@AntoniGawlikowski Год назад

"You need that? No."

@oiurehj 5 лет назад

+ 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?

@KevinPowell 5 лет назад

Haha, glad that the video wasn't a waste of time :)

@wtfgreg1246 Год назад

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...

@wtfgreg1246 Год назад

If I add a rotate(0deg) to the parent it does though

@coolgamer6458 6 лет назад

can you make a video describing position???

@coolgamer6458 6 лет назад

i am really confused about this

@coolgamer6458 6 лет назад

well i want make a portfolio site.The nav bar is creating the problem..

@coolgamer6458 6 лет назад

do you have any facebook id???

@KevinPowell 6 лет назад

I have this video that sort of looks at the basics of it cool gamer: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-P6UgYq3J3Qs.html and this one where I do some more stuff with it: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lUaw-AA9HnA.html Hopefully Jos van Weesel's been able to help you out, but if you have any questions let me know :)

@coolgamer6458 6 лет назад

thank you.your video is helping me a lot.

@ek1311 6 лет назад

1 000 000 $ Man!

@KevinPowell 6 лет назад

Thanks E K :)

@jenniferward6821 3 года назад

Ditto

@angelcaru 4 года назад

7:20 ONE HUNDRED VERTICAL WIDTH?!?

@KevinPowell 4 года назад

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?

@angelcaru 4 года назад

@@KevinPowell But you said VERTICAL WIDTH instead of VIEWPORT WIDTH

@devincenatiempo2238 6 лет назад

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/

@KevinPowell 6 лет назад

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!

@devincenatiempo2238 6 лет назад

Thanks. Yeah its funny, It turned out being a lot more complex project than I imagined at the start.

@MuhammadAdnan-gx6rd 6 лет назад

also teach javascript like this example

@KevinPowell 6 лет назад

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.

@sumanshrestha412 6 лет назад

You should check out stackblitz.com. It is an awesome development tool. As always, thank you for videos.

@KevinPowell 6 лет назад

That looks really cool, thanks for sharing it summon shresth!

@sumankathet2560 6 лет назад

1st comment 😂😂

@generationwolves 3 года назад

I wish I could intern for you.

@ayazaslam1362 2 года назад

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