Fulfledge

Polish how it looks

INPUT · Slides

Lift things with a shadow

01 / 05

A shadow is "the same shape, moved"

The screen is flat, and yet a button can look lifted. All that is happening is that the same shape is laid underneath, shifted a little.

The property that makes this shadow is box-shadow.

.btn {  box-shadow: 0 4px 0 #8c3d18;}

02 / 05

Four values in a row

The values of box-shadow, from the left, are

  • the shift across … how far to move it right
  • the shift down … how far to move it down
  • the blur … how soft the edge of the shadow is
  • the colour

The form you use most is "0 across, straight down".

.btn {  box-shadow: 0 4px 8px #8c3d18;}

03 / 05

A blur of 0 is "one board on another"

Set the blur to 0 and you get a shadow with a hard edge. Nothing goes fuzzy, so it looks like boards with some thickness stacked up.

The "you could press this" feel of a button is often made out of that thickness.

.btn {  box-shadow: 0 4px 0 #8c3d18;}

04 / 05

Blur it and it floats in the air

Make the blur bigger and the shadow spreads softly, so it looks as if the thing is floating in the air.

When you want to raise a card or a panel just a little, this is the more natural one.

.card {  box-shadow: 0 6px 12px #cfd8cf;}

05 / 05

Use shadow sparingly

Put a shadow on every box and you get a screen where everything is lifted and so nothing is.

The agreement is to use it only on what can be pressed and what matters. Have a go.