35+ Amazing CSS Book Effects (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS book effect code examples. The list includes 3d, animation, flip, and layout book effects.
1. 3D CSS Book Design
Author: Mina Mounir (mina-mounir)
Links: Source Code / Demo
Created on: June 5, 2020
Made with: HTML, CSS
2. The Handbook Download Animation
Author: Yancy Min (yancy)
Links: Source Code / Demo
Created on: July 28, 2018
Made with: HTML, CSS
3. Responsive Comic Book Layout
A responsive layout using flexbox with narrative text and speech bubbles styled in CSS. Background patterns also in CSS. The only acceptable use of Comic Sans font. :)
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: April 23, 2016
Made with: HTML, CSS
Tags: responsive, rwd, comic-book, speech-bubble, flexbox
4. Animated Books With CSS 3D Transforms
A creative way to show interactive books using CSS 3D Transforms. In this playground we’ll show you some creative, animated books with CSS 3D transforms and transitions.
Links: Source Code / Demo
5. Single Div Book Effect
Author: Poulami Chakraborty (poulamic)
Links: Source Code / Demo
Created on: June 19, 2020
Made with: HTML, CSS
6. George Orwell Book Cover In CSS
Author: Thea (HighFlyer)
Links: Source Code / Demo
Created on: March 21, 2019
Made with: HTML, CSS, JS
7. 3D Book Effect
Author: Tim Holman (tholman)
Links: Source Code / Demo
Created on: February 18, 2020
Made with: HTML, CSS
8. Books Hover Animation
Author: Yancy Min (yancy)
Links: Source Code / Demo, Dribbble Shot
Created on: July 14, 2018
Made with: HTML, CSS
9. CSS Only Flipping Book
Author: Dhanish (dhanishgajjar)
Links: Source Code / Demo
Created on: July 30, 2018
Made with: HTML, CSS
Tags: css, book, animation, ui, interaction
10. Book. HTML+CSS Only.
This book was created using HTML and CSS only, In Webflow. It has some CSS animations on mouse-hover.
Author: Anna Sabatini (sabanna)
Links: Source Code / Demo
Created on: March 13, 2018
Made with: HTML, CSS
Tags: codepenchallenge
11. Book Group UI
Author: NVC (Snowing)
Links: Source Code / Demo
Created on: June 7, 2018
Made with: HTML, SCSS, JS
12. Comic Book Style Layout With CSS Grid
Going crazy again with Grid CSS. This one is done in 30 minutes so the code quality isn't that good. I brute force my way to get the layout right quickly by using the dev tools as well. Anyway, only works well on browsers with Grid AND Clip Path. For Clip Path, it should work with Firefox ...Read More
Author: Aysha Anggraini (rrenula)
Links: Source Code / Demo
Created on: September 29, 2017
Made with: HTML, SCSS
Tags: css-grid, comic, layout, grid
13. [3D] Flip Hover Effects, Book Of Congratulations From The Game
Author: Vladislav (rikanutyy)
Links: Source Code / Demo
Created on: January 5, 2018
Made with: HTML, CSS, JS
Tags: game, hover, html, css, 3d
14. Book Opening Animation (Pure CSS)
Author: Valeriia (wwwebneko)
Links: Source Code / Demo
Created on: October 23, 2016
Made with: HTML, CSS
Tags: book, opening, uncover, journal
15. 3D Book Browsing
A CSS-only demo that simulates picking books off a shelf and previewing a page (on hover) in first-person. It all works using labels and offscreen radio inputs for each book, and a reset input as a Return button allows you to put everything back to its original position. I made up almost a...Read More
Author: Jon Kantner (jkantner)
Links: Source Code / Demo
Created on: June 15, 2017
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: 3d, books, bookshelf
16. Book Flip
Author: Thomas Podgrodzki (Podgro)
Links: Source Code / Demo
Created on: January 31, 2016
Made with: HTML, Less, JS
17. Responsive Comic Book Layout
A responsive layout using flexbox with narrative text and speech bubbles styled in CSS. Background patterns also in CSS. The only acceptable use of Comic Sans font. :)
Author: Chris Smith (chris22smith)
Links: Source Code / Demo
Created on: April 23, 2016
Made with: HTML, CSS
Tags: responsive, rwd, comic-book, speech-bubble, flexbox
18. CSS 3D Bending Effect - Page Flip
Now with bookmark! CSS only experiment. Page flip with bending effect. Works only on browsers that support transform-style: preserve-3d.
Author: Fabrizio Bianchi (_fbrz)
Links: Source Code / Demo
Created on: August 10, 2014
Made with: Haml, CSS, JS
CSS Pre-processor: None
JS Pre-processor: None
HTML Pre-processor: Haml
19. Jumpy Book Shelf
This animation is purely an easter egg. We try and put in a little unexpected fun wherever we can when designing our products. This was part of the Helix Cup web app we just launched where one of the experience tenants was simply: ‘fun’. The books were used on a downloadable resource panel...Read More
Author: Ryan Mack (ryanmclaughlin)
Links: Source Code / Demo
Created on: March 19, 2015
Made with: HTML, SCSS
Tags: svg, animation, motion, books, easter-egg
20. 3D Book Showcase
An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms.
Links: Source Code / Demo
21. Pure CSS Animal Book
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: January 27, 2014
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: 3d, animation, transform, haml, sass
22. Animated CSS Book
visit http://fivera.net/ Original by Marco Barría for Codrops http://tympanus.net/Development/AnimatedBooks/
Author: Fivera (fivera)
Links: Source Code / Demo
Created on: November 30, 2013
Made with: HTML, CSS
Tags: css, animation, book
23. Book Flip Responsive
Author: anastasijaprogramer (anastasijaprogramer)
Links: Source Code / Demo
Created on: September 2, 2020
Made with: HTML, SCSS
Tags: book, page, flip, responsive, cover
24. CSS Coffee Table Book Effect
Add a containing div to turn an image into coffee table book.
Author: Lynn Fisher (lynnandtonic)
Links: Source Code / Demo
Created on: July 16, 2020
Made with: HTML, Stylus, JS
Tags: css, illustration, book, perspective
25. Flip Book
Author: Smartika Tech (samuelmwangi)
Links: Source Code / Demo
Created on: May 23, 2020
Made with: HTML, CSS
Tags: flipbook, flip-book, flipbooks, flip-books, book
26. Book Hover
Author: omer cetin (omercetin)
Links: Source Code / Demo
Created on: March 18, 2020
Made with: HTML, CSS
Tags: hover, book, css, transform, cover
27. Booklet, Pure HTML & CSS
Small booklet realized with pure HTML and CSS, no JavaScript. Working with Chrome and Edge, still some z-index issues with Firefox.
Author: Mark Bücker (Mark-B)
Links: Source Code / Demo
Created on: March 15, 2020
Made with: HTML, CSS
Tags: book, turn pages
28. Old Book Layout
A New Year's side project.
Author: Lógico (logico-ar)
Links: Source Code / Demo
Created on: December 31, 2019
Made with: HTML, CSS
Tags: old book, layout, book, minimal
29. Pure CSS Books Animation
Author: roque363 (roque363)
Links: Source Code / Demo
Created on: August 26, 2019
Made with: HTML, SCSS
Tags: book, animation, show on hover, hover, book animation
30. CSS Only: Alphabet Book (turn My Pages)
Author: Kit Jenson (kitjenson)
Links: Source Code / Demo
Made with: HTML, CSS, JS
31. Book Overlay
An experiment in adding an overlay on top of an image to simulate a hardcover book with a spine. The idea was based on Apple Books presenting their books in the same way, but using PNG image overlays to create the effect.
Author: aepicos (aepicos)
Links: Source Code / Demo
Created on: May 17, 2019
Made with: HTML, SCSS
Tags: book, overlay, shading
32. Book HTML
Author: Sweety (create_vc)
Links: Source Code / Demo
Created on: May 8, 2019
Made with: HTML, CSS
Tags: book, book style page, book html, book layout
33. Book Made With Pure Css
Author: Siddharth raymaghi (raymaghi)
Links: Source Code / Demo
Created on: April 11, 2019
Made with: HTML, CSS, JS
Tags: html, css, javascript, book, begineer
More Awesome Lists:
Share: