A CSS experiment to recreate the card stacks featured on The Outline
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_data
_includes
_layouts
_posts
_sass
assets
scripts
styles
.gitignore
404.html
README.md
_config.yml
index.md

README.md

Outline Card Stack

The Outline is a new website from Joshua Topolsky and a great crew of assembled minds. It's got a unique design language: it's a bit marmite, but I particularly love the 'stacks' dotted through the interface like these:

A screenshot of the stacks on the Outline

I wanted to learn how to recreate the same stacked cards effect using purely CSS3 and HTML markup, including how the cards fan outwards when hovered over by the user. So I created this to show how I'm doing it.

Check out the Github Pages site for a demo.

Compatability

Tested on:

  • Safari v.10.0.2, MacOS Sierra
  • Chrome v.55.0.2883.95, MacOS Sierra
  • Safari, iOS 10.0.2