Knowing how to use the box-shadow property is one thing. Using it in ways that actually make your designs better is a completely different story! This video is all about how to use CSS box shadows in ways that enhance your designs.
First I look at the very basics, which is pretty much to make them really subtle. If you think that it’s too subtle, you’ve probably nailed it.
Second I look at how the size of the blur can affect a users perception of height, or how far off the element is from what is below it.
CodePen 1: https://codepen.io/kevinpowell/pen/qoMeZX
CodePen 2: https://codepen.io/kevinpowell/pen/NYLQzW
CodePen 3: https://codepen.io/kevinpowell/pen/JLagqZ
link to material design
Much of this was inspired by the material design documentation: https://material.io/guidelines/material-design/elevation-shadows.html
I have a newsletter! https://www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I’ve got a course just for you: https://www.kevinpowell.co/learn-sass
My Code Editor: VS Code – https://code.visualstudio.com/
How my browser refreshes when I save: https://youtu.be/h24noHYsuGc
Support me on Patreon: https://www.patreon.com/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 YouTube channel, make sure to follow me on Instagram and Twitter.