Why are there two ways to make shadows in CSS? box-shadow vs filter: drop-shadow()

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

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

50% 1

There are a few different ways to create shadows in CSS, so in this video, I look at the difference between two of them: box-shadow and filter: drop-shadow().
The other filter properties: developer.mozilla.org/en-US/d...
--
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
---
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 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
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

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

7 июн 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Great tutorial. I was curious if you could still do multiple shadows using filter:drop-shadow(), and turns out you can, but it's worth noting the syntax is slightly different than box-shadow: filter: drop-shadow(0px 0px 6px blue) drop-shadow(0px 0px 20px red); rather than: box-shadow: 0 0 6px blue, 0 0 20px red; Just noting for anyone else curious.

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

Wow I didnt even know it was possible to have multiple shadows at all :O

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

Your videos are a great compliment to the other online courses I'm taking for CSS. It seems whenever I have questions regarding whether or not something can be done in CSS, I find the answer with you. Thank you!

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

So glad I found your videos! You've got some of the most niche CSS topics that I haven't heard of, but they solve so many annoyances. Thank you!

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

Absolutely unbelievable supercool! This is exactly what I wanted to do a week ago. And I even didn't know about drop-shadow. Thank you a lot!

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

Kevin, That was absolutely beautiful, Thank you so much for putting this out for us.

@danielafolayan966 Год назад

Great stuff Kevin. I've been battling this since but now it's all clear. Thanks 😊

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

This is really helpful thank you so much ... I love the way you explain the things.

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

Thank you again, Kevin! Love your content, mate :)

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

Only 130k subs......so weird. Your chanel is the most relaxed one ever. Keep it up cause you are a day saver.

@huseyin.goktas 4 года назад

You are awesome. Love these types of contents.

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

Thanks man, you are clearing my doubts, please upload more videos on how we can make components responsive

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

That backdrop you have is amazing! 😮

@silentphil77 Год назад

That color information "that wouldn't be useful" was total gold! thank you very much mate! BTW love your content

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

The gotcha is pure gold! You just nail what I needed. Thanks!

@123Jastrzab 4 года назад

Wow that was exactly why I dropped this filter thing few days ago. Thank you very much :)

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

Thanks friend. Useful information.

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

I'm a beginner your vedios helped me to learn many concepts, thankyou sooo much. #love from India🙂.

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

Nice! Thanks for the tips.

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

Thanks for the color tip. You make my life so much easier

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

Awesome thanks Kev!

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

Nice and straight to the point.

@agustinc.5777 4 года назад

Nice video man

@kennall45 Год назад

Great video!

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

Thank you Kevin. I still learning The videos are very helpfull,

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

Thanks Kevin!

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

Learned something new today 💖

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

Useful! Thanks!

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

I just used drop-shadow in production, I guess watching your video was a great investment XD

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

Good tips. Thank you Kevin :) hi from japan

@j.almadhaji 4 года назад

Very useful video .. thank you

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

Great tutorial ! :)

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

Thank you kevin

@arianaruballos8176 8 месяцев назад

this guy is so nice, thxx

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

Fantastic video. Didn't know about the bug with the "spread" value. Speaking of the box model, as in the box-shadow property, one video I would like to request - not for myself but for CSS beginners - is an explanation on the difference between margin and padding, and border and outline. It really opened up a lot of avenues on what I could do with CSS once I learned what each one does. If you haven't covered it already, that is.

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

Good one, yeah. margin and padding especially are confused a lot. I have a few videos that look at outline specifically, but maybe another is in order too :)

@arefjavanbakht693 Год назад

This video was extremely helpful..

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

One more time... I have learned stuff that i will use in just 10minutes ...thanks.!!

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

THX very much

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

Nice one

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

Hey Kevin, Do you have an html css tutorial from beginner to advance?

@bruhmoment3731 Год назад

Brilliant. I wonder if drop-shadow's spread radius is supported by browsers now

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

You are awesome

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

Hey kevin... Does filter-shadow have option like box-shadow: inset 0 0 10px black;

@jairmercado2218 Год назад

gran video

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

Thanks, that is superb!!! What is even more awesome of filter? We can use multiple shadows in one call filter: drop-shadow(16px 16px 20px red) drop-shadow(-16px -16px 20px blue); Works awesome in FF and Chrome

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

Kev, It's always interesting to watch your videos. I'm not sure if you're gonna watch this, but thank you for the free Responsive layouts course 🥰

@robinpadaplin4425 10 месяцев назад

IS THERE ANY WAY I CAN DO THIS THE SAME IN PREMIERE PRO?

@manikaverma3057 10 месяцев назад

I think you have to first remove the image background then you can apply drop-shadow(), otherwise it will work as box-shadow only. This is so important part of drop-shadow() concept but nobody is pointing it out.

@robinpadaplin4425 10 месяцев назад

Is there any way i can i do this in premiere pro? The box shadow.

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

For what it's worth, I've just filed a specification issue to add the spread distance to the drop-shadow() function at github.com/w3c/fxtf-drafts/issues/409.

@gentlemenfx6482 Год назад

Nice video, but how can we put the shadows on our blog posts?

@Zorth2011 5 дней назад

Great job Kevin. Watch out, I see some jealous folks on this chat.

@UmidBek31 4 месяца назад

Does PNG format supported?

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

Hey Kevin, I was wondering if you could make a video on how to prevent FOUC. It's annoying me :

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

is there any particular reason why you use em units for shadows?

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

I sort of go back and forth there to be honest. Since it's often really small numbers I end up often using pixels, but for a quick demo I just went with ems... then ran into a problem with it, lol. I've seen some good uses cases for using ems on shadows though, it can be nice to have them relative like that, but only if the changes in size are less extreme.

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

Yesssssssss

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

how to spread indrop shadow

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

Not sure it's so bad that box shadow ignores contents, at least this way we have one method to give shadow to contents and one to the box, I can see occasions when we'd want both

@roman.sattler 3 года назад

The positioning wasn't off when you used text shadow and filter shadow in combination. Instead you got a shadow of your shadow.

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

But why do you feel it's weird to have two types of shadows? It's BOX shadow and it's supposed to be a shadow of the box surrounding it. What else do you expect? Anyway it's new knowledge for me that filter drop shadow existed. Thanks for that 😅

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

before I watch this video, let me guess the catch! multiple drop-shadows shadow the everything including previous drop-shadows (as it is a filter that builds up on previous filters), white multiple box-shadows always drop the shadow of the object (box) ignoring previous box-shadows. This messes up the geometry of shadow-effects (e.g. 3D-effects using box/text-shadow, where the next shadow is one pixel more away from the object ... using the drop-shadow each shadow is exactly 1px away from the already filtered object ... I accidently copy/pasted a set of text-shadows into a drop-shadow-command before I got this) ... ok, I now watch the video. Now, after I watched the video: I think could tell you something new.

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

So on mobil is hard to see the code. Too small

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

Note that on drop-shadow(), the 'inset' keyword isn't allowed either.

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

FireFox has been my problem browser of late. Fixed backgrounds on grids don't work with transforms, newlines in innertext strings aren't recognized in certain places, and there are some flexbox quirks too. If a design is going to break it's going to break in FF. I mean probably IE too but F that.

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

I find Safari the biggest issue personally, not FF. I'll have to check out that background issue. What are the flexbox quirks? I can't think of any that I've run into and I use Firefox the most often when writing CSS.

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

@@KevinPowell I'm pretty sure the flexbox thing was something I did that other browsers just didn't bark about. The grid issue though you can find out about on Brad Traversy's recent grid layout video; basically if you put a transform on it you just end up with the same image in every div instead of a fixed bg. I'm sure they'll address any issues quickly though-they've always seemed pretty reliable. It's just a bit of a running joke for me for the last couple weeks: ...and...of course it looks weird in FF...

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

Damn, the scariest thing in the world to a dev is when the specs/docs say one thing and the reality is something else. I'm gonna have nightmares about this.

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

W.o.w.

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

developer.mozilla.org/en-US/docs/Web/CSS/filter says that it doesn't have spread, 4th parameter is color.

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

If you click through to the drop-shadow article itself, it mentions the spread, and that it's not very widely supported - developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow

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

@@KevinPowell Thank you. I totally missed that. BTW I really enjoy your channel

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

Haha, it's all good :) - Interesting that they don't list it on the general filter page. Must be because support for it is so poor. I always find it fascinating that things like that make it into the spec, but not into the browsers... I'd love to know the reason they aren't bothering with it.