ZURB is a product design company that has helped over 300 companies create better products, websites and services since 1998. We’re a team of T-shaped product design experts with a bold mission: Change the way people design connected products and services. We lead by design through our consulting, product design tools and training. Over the last two decades, we’ve developed Progressive Design, a system that helps us create consistently impactful work that touches millions of people around the globe every day.

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

Foundation 6: Leaner, Meaner and Cleaner Sass
Abu 0zaskod3 j4nthwyubpspihmxakayfsblaz0mgm
Create, Debate and Win Your Team Over
Zb f5yeti 8 05
Foundation 6, Prototype to Production
Google's New Logo: Standing Out or Blending In?
Wired2015 post1
ZURB Wired 2015 Has Begun!
Wired 2015 dtst
ZURB Wired 2015: Announcing Downtown Streets Team as This Year's Nonprofit!
Iteration Builds Momentum
, ,
How The Next Web Redesign Puts Content First
Use or lose1
Designers: Use'em or Lose'em!
Meerkat team
The 'I' in Team
Starting the Summer Off Right: Meet Our New ZURBians!
Change the way people design
, ,
Change the Way People Design
Internet of things
, ,
Introducing the New Notable
Zoran (1)
A Curious Mind With a Passion for Problem Solving, Meet Our Newest Engineer
15288610555 18cd2d5f0d k
Attention Nonprofits: We're Now Taking Applications for ZURB Wired
An Entrepreneur With a Passion for People, Meet Our New Business Designer
Litmus test ambition
The Designer Litmus Test