Related tutorial

Transcript

Box Shadows add styling outside or inside the rectangular boundary of an element. They can be used (the pronoun "they" of course referring to "Box Shadows") to add focus or depth to buttons, sections, div blocks — you name it.

We're covering Box Shadow presets, Box Shadow styles. We'll talk through adding transitions to these shadows. And by the end of this, you'll be a Box Shadow expert.

Now even though things like drop shadow or outer glow give us different effects, they're all using the same concept: a shadow that affects the box. A Box Shadow. For the common types, we have some starting points — or presets.

We're going to roll right through these then talk about styling them more a bit later.

Drop shadow adds exactly that: a drop shadow.

We also have outer glow, which we can see on our second element here.

We got inner shadow, which is similar to drop shadow but applies to the inside.

And finally, highlight. Subtle, but effective.

And those are the Box Shadow presets.

Let's look at our style options.

We'll start by adding a drop shadow — but you can access these options by using any preset.

For a drop shadow, solid black is the default. We can change our color and even our opacity for the shadow right here.

Outside and inside lets us choose how the shadow is applied.

And, one of the most helpful values when styling a shadow is its angle. We can press the arrows or even click and drag the dial to adjust our angle. Or if we want super precision, we can type out the angle in degrees.

Distance of course moves that shadow farther or closer in that direction; that angle we set a moment ago.

And blur affects how focused or solid the blur is. 0 is completely solid. In fact, if we set our distance and blur to 0 and our size to 1, we've created a 1px border that doesn't push around any content on the inside or outside of our boundary.

Finally, let's look a bit closer at size: this affects the size (or spread) of the shadow relative to the boundaries of this element. 0px means it's creating a shadow that's the same size as the element. Negative values work for size, too.

And those are the configurable shadow styles.

Next is transitions.

And this is pretty straightforward. When we have a Box Shadow applied in the None state (the normal state we style), we can very easily control how that shadow looks in different states. Like Hover.

So right here we're adding a standard drop shadow to our class. This Box Shadow has 20% opacity for the color black, and again we're styling our None (or normal) state.

Let's change how it looks on the Hover state. And here all we'll do is ramp up the opacity for our drop shadow.

If we hover over anything that's using this class, it cuts abruptly.

And from our None state, if we go down to add a transition, we can smooth this out. We can click to add a transition, and we'll make sure to select Box Shadow since that's what we're wanting to affect, and we'll keep the transition at 200 milliseconds.

If we hover? We have a smooth fade or dissolve between the None state and the Hover state.

We can make other changes here, too. So if we go back to our Hover state, we can go down and click to modify the Box Shadow styling. What do we want to change? Let's do distance of that shadow or the amount of blur that applies. These changes are being made in real-time, so we can just hover on over to the Canvas to see our handy work in action.

That's transitioning shadows.

So let's recap. We can use shadow presets like drop shadow or outer glow as great starting points. We can make style adjustments to our Box Shadows like color and distance. And of course we can control states and transitions.