Multiple elements with one shadow with CSS
Shadows are popular with CSS, but sometimes we have many nested items that we want to share one singular shadow, instead of each one having its own, so I take a look at how to do that using the filter property in this video. π Links β Higher performance animated shadows: https://youtu.be/u6Rur7G8HNY β Codepen: https://codepen.io/kevinpowell/pen/eYeayqx β More info on filter: https://developer.mozilla.org/en-US/docs/Web/CSS/filter β Timestamps 00:00 - Introduction 00:59 - Different ways we can apply shadows 01:40 - filter drop-shadow 02:34 - drop-shadow with text 03:52 - grayscale 05:39 - multiple filters 06:30 - blur #css -- Come hang out with other dev's in my Discord Community π¬ https://discord.gg/nTYCvrK Keep up to date with everything I'm up to β https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! πΊ https://www.twitch.tv/kevinpowellcss --- Help support my channel π¨βπ Get a course: https://www.kevinpowell.co/courses π Buy a shirt: https://teespring.com/stores/making-the-internet-awesome π Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Code - https://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 YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://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!
Download
1 formatsVideo Formats
Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.