Today I Learned - Rocky Kev

TIL How to actually do CSS Shadows

POSTED ON:

TAGS: css design ux

Not going to lie - I'm pretty bad with shadows.

AH MY FREAKIN' EYES

This is all from this post ->
Design detail: crafting better shadows for interaction

Properly doing shadows

A real world shadow has two main distinctive parts.

Direct light casts the first shadow and ambient light casts the second.

Directional Light:

For our first shadow, we want to emphasise the elevation in our UI element, and a strong directional light is the source we need to create this effect. I use a directional light shadow that has more offset than the ambient light shadow, as it is comes in from a single angle.

This shadow will also be more defined and darker than an ambient light shadow.

Shadow cast by ambient light

A shadow cast by ambient light is more diffuse, softer and has less vertical offset than that cast by directional light as it comes from all angles.

One thing to keep in mind is that the higher the elevation of an element, the fainter the ambient shadow. It starts of dark, (at small elevations, it can appear darker than that cast by directional light) and than becomes faint until it disappears.

Combined

When you put them together, it gives is a more realistic look.

Shadow codes: 


/* Shadow for a low elevation */
div {
  box-shadow:
      0 2px 3px hsla(0, 0%, 0%, 0.12) /* Ambient light shadow */,
      0 3px 6px hsla(0, 0%, 0%, 0.14) /* Direct light shadow */;
}

/* Shadow for a higher elevation */
div {
  box-shadow:
      0 4px 12px hsla(0, 0%, 0%, 0.12) /* Ambient light shadow */,
      0 14px 24px hsla(0, 0%, 0%, 0.16) /* Direct light shadow */;
}

/* Shadow for a highest elevation (faint ambient light shadow) */
div {
  box-shadow:
      0 5px 12px hsla(0, 0%, 0%, 0.4) /* Ambient light shadow */,
      0 18px 32px hsla(0, 0%, 0%, 0.16) /* Direct light shadow */;
}

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')