Post thumbnail: 15 CSS Book Effects

15 CSS Book Effects

Collection of free HTML and CSS book effect code examples: 3d, animation, flip, layout, etc.

Demo image: Flipping Book Flipping Book - GIF Demo

Author

  • Dhanish

Made with

  • HTML / CSS

About the code

Flipping Book

CSS only flipping book.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Book Group UI Book Group UI - GIF Demo

Author

  • NVC

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Book Group UI

Book group UI with HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Book Animation Book Animation - GIF Demo

Author

  • Lyna Nguyen

Made with

  • HTML / CSS

About the code

Book Animation

HTML & CSS book animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: 3D Book

Author

  • Anna Sabatini

Made with

  • HTML / CSS

About the code

3D Book

This book was created using HTML and CSS only. It has some CSS animations on mouse-hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Book Flip Hover Effect

Author

  • Robert Bunnysman

Made with

  • HTML / CSS

About the code

Book Flip Hover Effect

3D flip hover effects, book of congratulations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Comic Book Style Layout

Author

  • Aysha Anggraini

Made with

  • HTML / CSS (SCSS)

About the code

Comic Book Style Layout

Good comic book style layout with CSS Grid.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Book Layout

Author

  • Erin E. Sullivan

Made with

  • HTML / CSS

About the code

Book Layout

A responsive skeuomorph book layout, packed with fun little features.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: 3D Book Browsing 3D Book Browsing - GIF Demo

Author

  • Jon Kantner

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Book Opening Animation

Author

  • Valeriya

Made with

  • HTML / CSS

About the code

Book Opening Animation

Book opening animation in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Responsive Comic Book Layout

Author

  • Chris Smith

Made with

  • HTML / CSS

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Book Flip Book Flip - GIF Demo

Author

  • Thomas Podgrodzki

Made with

  • HTML / CSS (less) / JavaScript

About the code

Book Flip

CSS book flip with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Jumpy Book Shelf Jumpy Book Shelf - GIF Demo

Author

  • Ryan McLaughlin

Made with

  • HTML / CSS (SCSS)

About the code

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, but if you happen to move your mouse over them, they will jump!

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Pure CSS Animal Book

Author

  • Ana Tudor

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Pure CSS Animal Book

Move mouse cursor from left to right/ right to left.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Books with CSS 3D Transforms Animated Books with CSS 3D Transforms - GIF Demo

Author

  • Marco Barria

Made with

  • HTML / CSS / JavaScript

About the code

Animated Books with CSS 3D Transforms

A creative way to show interactive books using CSS 3D transforms.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: 3D Book Showcase 3D Book Showcase - GIF Demo

Author

  • Mary Lou

Made with

  • HTML / CSS / JavaScript

About the code

3D Book Showcase

An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

back to top