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.

a.singlediv.com by Lynn Fisher

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

.end { }

@RazvanCaliman

razvancaliman.com/infoshare-2016

Credits:

Reveal.js
CodeMirror
Emmet for CodeMirror
NASA image
Open Sans font
Key by William J. Salvador
Skeleton by Sebastian Langer

CSS for Decoration