CSS for Decoration

@RazvanCaliman

  • CSS Shapes
  • CSS Regions
  • CSS Masking
  • CSS Blend Modes
  • tools & prototypes

<insert-thing> done with CSS only

CSS features for decoration

  • CSS Gradients
  • CSS Filters
  • CSS Blend Modes
  • CSS Masking
  • backgrounds
  • box-shadow
  • text-shadow
  • borders

Agenda

  • Background shapes
  • Skeleton screens
  • Better borders

CSS Gradients

CSS gradients are images, not colors.

CSS Background Properties

  • background-image
  • background-size
  • background-clip
  • background-position
  • background-repeat
  • background-attachment
  • background-origin

An element can have
multiple background images, each with its own properties.

If all you have is a hammer,
everything looks like a nail.
— Abraham Maslow

D-D Play on Behance by 灰 昼

Skeleton Screens

Skeleton screen examples by Luke Wroblewski

Better borders

Gradient border
Image border

Range inputs

CSS Secrets by Lea Verou

CSS for Decoration