Make a Flipbook with Pure CSS

wrote this on in , . 492 reactions

Just admit it, we've all done it. As designers working on responsive websites, we all grab the edge of our browser window and shrink it down to see how designs change and collapse. We thought it would be cool to add a bit of whimsy to this common interaction, or at least a little surprise and delight. We call it the CSS Flipbook!

Using some Sass and a tiny bit of HTML we recreate the feel of a flipbook. Grab the edge of your browser window and pull it back and forth for a nifty little animation, no JS necessary!

Check out the example in the Playground, download the code and start having some fun. There's all kinds of fun uses for this snippet and we'd love to see how creative you can get, so feel free to share yours with us in the comments! Who knows, we just might send you a special gift from the team!

Make a Flipbook

Desktop hd copy 2
Design for Proximity, Not for Clicks
Brutalism
17 Web Design Trends That Will Take Over 2017
Container queries 2
Foundation & CSS Grid: Think Beyond the Page