INTRO

INTRO

New

Intro to the Designer

Intro to the Designer

New

2:48

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

HTML Structure

HTML Structure

New

1:55

WEB STRUCTURE

WEB STRUCTURE

New

The Box Model

The Box Model

New

1:54

Element Hierarchy

Element Hierarchy

New

3:57

Navigator Panel

Navigator Panel

New

2:45

ELEMENTS

ELEMENTS

New

Element Panel

Element Panel

New

1:49

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div block

Div block

New

3:37

Buttons & Links

Buttons & Links

New

Button

Button

New

14:08

Link Block

Link Block

New

9:35

Text Link

Text Link

New

1:16

Typography

Typography

New

3:20

Heading

Heading

New

2:02

Paragraph

Paragraph

New

4:42

Rich Text

Rich Text

New

3:52

Text Block

Text Block

New

0:56

Block Quote

Block Quote

New

0:42

List

List

New

2:31

Media

Media

New

Image

Image

New

3:39

Image File Types

Image File Types

New

2:22

Image Resolution

Image Resolution

New

3:28

Assets Panel

Assets Panel

New

3:08

Video

Video

New

1:20

Background Video

Background Video

New

3:15

Components

Components

New

Intro to Forms

Intro to Forms

New

4:55

Styling Forms

Styling Forms

New

2:55

Navbar

Navbar

New

9:38

Styling a Navbar

Styling a Navbar

New

4:34

Navbar Menu Button

Navbar Menu Button

New

4:51

Slider

Slider

New

4:56

Tabs

Tabs

New

4:38

Lightbox

Lightbox

New

3:44

Map

Map

New

2:58

Dropdown

Dropdown

New

4:38

Social Media Buttons

Social Media Buttons

New

2:49

Custom Code Embed

Custom Code Embed

New

1:24

Symbols

Symbols

New

3:47

Styling Basics

Styling Basics

New

Intro to Style Panel

Intro to Style Panel

New

3:15

HTML Tags

HTML Tags

New

3:59

Classes

Classes

New

2:46

Combo Classes

Combo Classes

New

4:05

Text Style Inheritance

Text Style Inheritance

New

3:18

Style Manager

Style Manager

New

1:56

States

States

New

2:47

Transitions

Transitions

New

2:40

Color Picker & Swatches

Color Picker & Swatches

New

3:51

Color Values

Color Values

New

3:22

Layout Basics

Layout Basics

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Display Settings

Display Settings

New

2:54

Padding & Margin

Padding & Margin

New

2:48

Width & Height Units

Width & Height Units

New

3:59

Floats & Clears

Floats & Clears

New

1:52

Flexbox & Grid

Flexbox & Grid

New

Intro to Flexbox

Intro to Flexbox

New

2:27

Centering elements with Flexbox

Centering elements with Flexbox

New

1:20

Equal height layouts with Flexbox

Equal height layouts with Flexbox

New

1:47

Grid layouts overview

Grid layouts overview

New

4:18

Flexbox vs. Grid

Flexbox vs. Grid

New

4:00

Advanced Layout

Advanced Layout

New

Positioning Overview

Positioning Overview

New

1:48

Relative Positioning

Relative Positioning

New

1:43

Absolute Positioning

Absolute Positioning

New

1:43

Fixed Positioning

Fixed Positioning

New

1:27

Z-Index

Z-Index

New

1:49

Overflow

Overflow

New

1:49

Styling Typography

Styling Typography

New

Intro to Web Typography

Intro to Web Typography

New

3:20

Typography Units

Typography Units

New

2:43

Line Height

Line Height

New

1:38

Advanced Typography Styles

Advanced Typography Styles

New

3:01

Google Fonts

Google Fonts

New

1:18

Custom Fonts

Custom Fonts

New

1:27

Text Shadow

Text Shadow

New

2:36

Background & Border Styles

Background & Border Styles

New

Background Styles Overview

Background Styles Overview

New

2:20

Background Image

Background Image

New

2:04

Background Gradient

Background Gradient

New

3:02

Border

Border

New

3:07

Border Radius

Border Radius

New

3:22

Box Shadow

Box Shadow

New

3:34

3D Styles

3D Styles

New

Intro to 3D

Intro to 3D

New

2:25

3D Perspective

3D Perspective

New

4:01

2D & 3D Transforms

2D & 3D Transforms

New

4:53

EFFECTS

EFFECTS

New

Opacity

Opacity

New

1:44

Filters

Filters

New

2:59

Cursors

Cursors

New

1:45

Responsive Design

Responsive Design

New

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Box shadows add styling inside or outside the rectangular boundary of an element. They can be used to add focus or depth to buttons, sections, div blocks, or any other element in your project. 

Here we’ll cover three aspects of box shadows:

  1. ‍Box shadow presets
  2. ‍Box shadow styles
  3. ‍Transitioning shadows

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

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.

That's our crash course on Box Shadows.