Количество сайтов в интернете велико. Запомниться чем то уникальным и понравиться современному читателю сложно. Для этого надо искать какие то нестандартные шаги. Данная разработка позволяет визуально отражать информацию в виде 3D книги (CSS книга с перелистыванием страниц). Количество страниц книги не ограничено. Разрешено вставлять текст и картинки ( тег «img»).
Фото CSS книги
Видео CSS книги
Описание CSS книги
При разработке мы сознательно отказались от поддержки браузера IE. При работе в браузере Google Chrome для Вас не будут действовать никакие ограничения. FireFox не сможет перелистывать страницу при нажатии на нее.
Блок управления для браузера Firefox.
<div id=»control»>
<a id=»pressLeft» href=»#»>Влево</a>
<a id=»pressRight» href=»#»>Вправо</a>
</div>
Браузер Firefox не может корректно определить какой объект нажат левой клавишей мыши. Эта проблема наблюдается для случаев, расположения объектов друг над другом (position: absolute). При это Z-index верхнего объекта игнорируется.
Поэтому специально для него добавлены кнопки «Влево» и «Вправо».
Первая страница
<div class="page_project page-first page-open">
...
</div>Первая страница должна иметь класс «page-first».
Последняя страница
<div class="page_project page-last page-open">
...
</div>Последняя страница должна иметь класс «page-last».
Описание страницы CSS книги
<div class="page_project page-open">
<div class="page_side_left">
<div class="working_area">
<p>
...
</p>
</div>
</div>
<div class="page_side_right">
<div class="working_area">
<p>
...
</p>
</div>
</div>
</div>Класс «page_project» присваивается всем страницам книги.
Класс «page-open» присваивается всем еще не перевернутым страницам.
Класс «page_side_left» и «page_side_right» присваивается левой и правой части страницы, чтобы создать 3D эффект.
Класс «working_area» предназначен для отступов на странице.
Старт CSS книги.
Все страницы будут расставлены по Z-index для корректного отображения.
В дальнейшем, после каждой операции переворота страницы книги, разработка будет пересчитывать z-index объектов.
После старта CSS книга выводит информационное сообщение и по таймеру удаляет его.
Скачать CSS книгу
Ссылка для скачивания CSS книга с переворачивающимися страницами