0 2


Slides and demos for my infoShare 2016 talk, "CSS for Decoration"

On Github oslego / infoshare-2016

CSS for Decoration


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

<insert-thing> done with CSS only

Polygon background
Demanding lemon
Bad code: - needless html - CSS side effects - difficult to maintain - use case for SVG
You were so preoccupied with whether or not you could you didn't stop to think if you should.

CSS features for decoration

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


  • 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
Progress indicators: too much emphasis on "indicator" instead of "progress"
Skeleton screen examples by Luke Wroblewski
  • performance ++
  • No assets download
  • No uneccesary HTML
  • No JS, use :empty selector
  • performance ++
  • No assets download
  • No uneccesary HTML
  • No JS, use :empty selector

Better borders

Gradient border
Image border

Range inputs

CSS Secrets by Lea Verou

CSS for Decoration

  • CSS has powerful features for decoration
  • They can be complex to use
  • specialized tooling required; DevTools
  • not an excuse to avoid SVG
CSS for Decoration