Вы здесь: Главная » CSS » Примеры верстки книг на HTML и CSS

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

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

Макет книги

Автор Erin E. Sullivan

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

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

Автор Dhanish

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

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

Автор Fabrizio Bianchi

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

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

Автор Yancy Min

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

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

Автор Vladislav

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

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

Автор Rafael

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

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

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

Автор Ronny Siikaluoma

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

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

Автор NVC

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

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

Автор Thomas Podgrodzki

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

Автор Anna Sabatini

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

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

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

Автор Alex

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

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

Автор Mina Mounir

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

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

Автор Jon Kantner

See the Pen 3D Book Browsing by Jon Kantner (@jkantner) on CodePen.18892

Автор Sarah Frisk

See the Pen Magician's Shelf by Sarah Frisk (@sfrisk) on CodePen.18892

Автор Yuhomyan

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

Автор Lynn Fisher

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

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

Автор Lynn Fisher

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

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

Автор Lynn Fisher

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

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

Автор Lynn Fisher

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

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

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

Автор Joe

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

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

Автор Michael Schofield

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

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

Автор Lyna Nguyen

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

 

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *