Примеры верстки книг на HTML и CSS

Вы когда-нибудь задумывались о том, что на HTML и CSS можно сделать книгу? Оказывается, есть умельцы, выкладывающие свои работы на codepen.io, которые с помощью 3D трансформаций могут сделать вполне реалистичные страницы, а также позволить заглянуть внутрь книги. Некоторые примеры нужно смотреть только на большом экране.

Макет книги

Автор Erin E. Sullivan

See the Pen Book Layout by Erin E. Sullivan (@erinesullivan) on CodePen.

Открывающаяся книга на чистом CSS

Автор Dhanish

See the Pen CSS Only Flipping Book by Dhanish (@dhanishgajjar) on CodePen.

Открывающаяся книга с картинками

Автор Fabrizio Bianchi

See the Pen CSS 3D Bending Effect - Page Flip by Fabrizio Bianchi (@_fbrz) on CodePen.

Предзагрузчик в виде книги (блокнота, тетради)

Автор Jon Kantner

See the Pen Book Preloader by Jon Kantner (@jkantner) on CodePen.

Приоткрытая книга при наведении

Автор Yancy Min

See the Pen Books Hover Animation by Yancy Min (@yancy) on CodePen.

Поздравительная открытка

Автор Vladislav

See the Pen [3D] Flip Hover Effects, Book Of Congratulations from the game by Vladislav (@rikanutyy) on CodePen.

Приоткрываем книгу при наведении

Автор Rafael

See the Pen Bookshelf by Rafael (@rafaelrinaldi) on CodePen.

Отличная анимация открывающейся книги при наведении курсора мыши

Внутри предусмотрена рабочая ссылка Download для скачивания книги.

Автор Ronny Siikaluoma

See the Pen CSS Animated books by Ronny Siikaluoma (@siiron) on CodePen.

Эффект 3d книги при клике

Автор NVC

See the Pen Book Group UI by NVC (@Snowing) on CodePen.

Поворот книги при движении мышью

Автор Thomas Podgrodzki

See the Pen Book Flip by Thomas Podgrodzki (@Podgro) on CodePen.

Автор Anna Sabatini

See the Pen Book. HTML+CSS only. #CodePenChallenge by Anna Sabatini (@sabanna) on CodePen.

Анимация поворота книги

Сам пример позволяет посмотреть на книгу с разных сторон, используя переключатели вида книги и камеры. Но лучше всего смотрится  анимация поворота книги. Бесценная вещь для онлайн-магазина!

Автор Alex

See the Pen 3d Lighting Effects in CSS by Alex (@alexmwalker) on CodePen.

Листаем книгу

Автор maxew

See the Pen cpc - bookText by Elen (@ambassador) on CodePen.

Книга на столе

Автор Mina Mounir

See the Pen 3D Book Design by Mina Mounir (@mina-mounir) on CodePen.

Книжная полка

Автор Yuhomyan

See the Pen Pure CSS Books by Yuhomyan (@yuhomyan) on CodePen.

Автор Lynn Fisher

See the Pen Single div CSS book search by Lynn Fisher (@lynnandtonic) on CodePen.

Автор Akash bhandwalkar

See the Pen books and table by Akash bhandwalkar (@Akasj)on CodePen.

Не совсем книжная, но полка с большим количеством элементов

Автор Lynn Fisher

See the Pen CSS collector’s cabinet by Lynn Fisher (@lynnandtonic) on CodePen.

Книга в 2-х проекциях

Автор Lynn Fisher

See the Pen CSS coffee table book effect by Lynn Fisher (@lynnandtonic) on CodePen.

Автор Tanner Dolby

See the Pen Books - CSS by Tanner Dolby (@tannerdolby)on CodePen.

Постеры в 2D и 3D

Автор Lynn Fisher

See the Pen CSS leaning card effect by Lynn Fisher (@lynnandtonic) on CodePen.

Автор Akash bhandwalkar

See the Pen 3D wall by Akash bhandwalkar (@Akasj) on CodePen.

Вариант страницы для книжного магазина

В примере есть сортировка по категориям, алфавиту, дате публикации. При наведении мы видим поворот книги. При клике на кнопке "Details" - дополнительную информацию.

Автор Joe

See the Pen Book Viewer by Joe (@jjcarey) on CodePen.

Анимация появления книг

Автор Michael Schofield

See the Pen Library Books CSS Spinner by Michael Schofield (@michaelschofield) on CodePen.

Эффект опускания книги при наведении курсора мыши

Автор Lyna Nguyen

See the Pen Book animation (HTML & CSS) by Lyna Nguyen (@WebDevLyna) on CodePen.

Слайдер для демонстрации книг

Автор Aysenur Turk

See the Pen Book Store UI by Aysenur Turk (@TurkAysenur) on CodePen.

Второй слайдер с использованием анимации GSAP от автора Jos Faber.

See the Pen Switch 3D game cover slider with GSAP by Jos Faber (@josfabre) on CodePen.

Трехмерная карточка

Трехмерная карточка (3d-card), которая может быть стилизована под книгу.

Автор Amit Sheen

See the Pen 3D CSS card by Elen (@ambassador) on CodePen.

Карточки для оплаты

Трехмерные карты для оплаты. Могут быть использованы для стилизации книг или постеров

Автор Andreas Storm

See the Pen Tariff Cards by Elen (@ambassador) on CodePen.

Трехмерные слои (блоки), парящие в воздухе

Сделано на React. Автор Daniel Barrio Fierro.

See the Pen Isometric Floating Layers (SVG) by Daniel Barrio Fierro (@db4rr) on CodePen.