infoshare-2016

View Github Repository Open presentation in a new window

oslego

See all presentation from oslego

infoshare-2016

0 2

infoshare-2016

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

On Github oslego / infoshare-2016

CSS for Decoration

@RazvanCaliman

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

<insert-thing> done with CSS only

Polygon background http://stackoverflow.com/questions/30682806/css-is-it-possible-to-achieve-this-without-an-image/30735109#30735109
Demanding lemon http://stackoverflow.com/questions/27874354/lemon-shape-css-and-html
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

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

https://www.youtube.com/watch?v=Rehw8L5Cl8M
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