Box shadow – Webflow CSS tutorial (using the Old UI)


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. That’s our crash course on Box Shadows.

Add a Comment

Your email address will not be published. Required fields are marked *