Главная » Языки программирования

Book style with css

Содержание
  1. Примеры верстки книг на HTML и CSS
  2. Макет книги
  3. Открывающаяся книга на чистом CSS
  4. Открывающаяся книга с картинками
  5. Предзагрузчик в виде книги (блокнота, тетради)
  6. Приоткрытая книга при наведении
  7. Поздравительная открытка
  8. Приоткрываем книгу при наведении
  9. Отличная анимация открывающейся книги при наведении курсора мыши
  10. Эффект 3d книги при клике
  11. Поворот книги при движении мышью
  12. Анимация поворота книги
  13. Листаем книгу
  14. Книга на столе
  15. Книжная полка
  16. Не совсем книжная, но полка с большим количеством элементов
  17. Книга в 2-х проекциях
  18. Постеры в 2D и 3D
  19. Вариант страницы для книжного магазина
  20. Анимация появления книг
  21. Эффект опускания книги при наведении курсора мыши
  22. Слайдер для демонстрации книг
  23. Трехмерная карточка
  24. Карточки для оплаты
  25. 35 CSS Book Effects
  26. Related Articles
  27. Author
  28. Links
  29. Made with
  30. About a code
  31. Text Book
  32. Author
  33. Links
  34. Made with
  35. About a code
  36. 3D Book
  37. Author
  38. Links
  39. Made with
  40. About a code
  41. Book Preview
  42. Author
  43. Links
  44. Made with
  45. About a code
  46. Mrs. Dalloway Aged Paper Reader — Responsive
  47. Author
  48. Links
  49. Made with
  50. About a code
  51. Book Preloader
  52. Author
  53. Links
  54. Made with
  55. About a code
  56. 3D Ebook Flip Animation
  57. Author
  58. Links
  59. Made with
  60. About a code
  61. Turning Pages with CSS
  62. Author
  63. Links
  64. Made with
  65. About a code
  66. CSS Coffee Table Book Effect
  67. Author
  68. Links
  69. Made with
  70. About a code
  71. CSS Books
  72. Author
  73. Links
  74. Made with
  75. About a code
  76. Single DIV Book
  77. Author
  78. Links
  79. Made with
  80. About a code
  81. CSS-Only Foundation Book Preview
  82. Author
  83. Links
  84. Made with
  85. About a code
  86. 3D Book Design
  87. Author
  88. Links
  89. Made with
  90. About a code
  91. 3D Book
  92. Author
  93. Links
  94. Made with
  95. About a code
  96. Pure CSS Magazine Style Layout with Transitions
  97. Author
  98. Links
  99. Made with
  100. About the code
  101. George Orwell 1984 Book Cover
  102. Author
  103. Links
  104. Made with
  105. About a code
  106. Shiny Book Reveal
  107. Author
  108. Links
  109. Made with
  110. About the code
  111. Flipping Book
  112. Author
  113. Links
  114. Made with
  115. About the code
  116. Books Hover Animation
  117. Author
  118. Links
  119. Made with
  120. About the code
  121. Book Group UI
  122. Author
  123. Links
  124. Made with
  125. About the code
  126. Book Animation
  127. Author
  128. Links
  129. Made with
  130. About the code
  131. 3D Book
  132. Author
  133. Links
  134. Made with
  135. About the code
  136. Book Flip Hover Effect
  137. Author
  138. Links
  139. Made with
  140. About the code
  141. Comic Book Style Layout
  142. Author
  143. Links
  144. Made with
  145. About the code
  146. Book Layout
  147. Author
  148. Links
  149. Made with
  150. About the code
  151. 3D Book Browsing
  152. Author
  153. Links
  154. Made with
  155. About the code
  156. Book Opening Animation
  157. Author
  158. Links
  159. Made with
  160. About a code
  161. Spinning 3D Book Using Only CSS
  162. Author
  163. Links
  164. Made with
  165. About the code
  166. Responsive Comic Book Layout
  167. Author
  168. Links
  169. Made with
  170. About the code
  171. Book Flip
  172. Author
  173. Links
  174. Made with
  175. About the code
  176. Jumpy Book Shelf
  177. Author
  178. Links
  179. Made with
  180. About a code
  181. CSS 3D Bending Effect — Page Flip
  182. Author
  183. Links
  184. Made with
  185. About the code
  186. Pure CSS Animal Book
  187. Author
  188. Links
  189. Made with
  190. About the code
  191. Animated Books with CSS 3D Transforms
  192. Author
  193. Links
  194. Made with
  195. About the code
  196. 3D Book Showcase
  197. Author
Читайте также:  No java control panel in windows 8

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

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

Макет книги

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

35 CSS Book Effects

Collection of free HTML and CSS book effect code examples (3d, animation, flip, layout, etc) from Codepen, Github and other resources. Update of June 2021 collection. 9 new items.

Author

Made with

About a code

Text Book

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

Author

Made with

About a code

3D Book

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Made with

About a code

Book Preview

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

Demo image: CPC - Mrs. Dalloway Aged Paper Reader - Responsive

Author

Made with

About a code

Mrs. Dalloway Aged Paper Reader — Responsive

Auto overflow reader with aged paper styling.

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

Author

Made with

About a code

Book Preloader

A looping 3D-ish book animation that could act as a preloader.

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

Author

Made with

About a code

3D Ebook Flip Animation

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

Author

Made with

About a code

Turning Pages with CSS

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

Demo image: CSS Coffee Table Book Effect

Author

Made with

About a code

CSS Coffee Table Book Effect

Add a containing div to turn an image into coffee table book.

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

Demo image: CSS Books

Author

Made with

About a code

CSS Books

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

Demo image: Single DIV Book

Author

Made with

About a code

Single DIV Book

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

Author

Made with

About a code

CSS-Only Foundation Book Preview

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

Demo image: 3D Book Design

Author

Made with

About a code

3D Book Design

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

Demo image: 3D Book

Author

Made with

About a code

3D Book

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

Author

Made with

About a code

Pure CSS Magazine Style Layout with Transitions

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

Author

Made with

About the code

George Orwell 1984 Book Cover

George Orwell 1984 book cover with hover effect in HTML, SVG and CSS.

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

Author

Made with

About a code

Shiny Book Reveal

3D hover effect to open a book and reveal the synoposis of the book.

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

Demo image: Flipping Book

Author

Made with

About the code

Flipping Book

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

Author

Made with

About the code

Books Hover Animation

Pure CSS book hover animation.

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

Demo image: Book Group UI

Author

Made with

About the code

Book Group UI

Book group UI with HTML, CSS and JS.

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

Demo image: Book Animation

Author

Made with

About the code

Book Animation

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

Demo image: 3D Book

Author

Made with

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

Demo image: Book Flip Hover Effect

Author

Made with

About the code

Book Flip Hover Effect

3D flip hover effects, book of congratulations.

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

Demo image: Comic Book Style Layout

Author

Made with

About the code

Comic Book Style Layout

Good comic book style layout with CSS Grid.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Book Layout

Author

Made with

About the code

Book Layout

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

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

Demo image: 3D Book Browsing

Author

Made with

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 label s and offscreen radio input s 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

Demo image: Book Opening Animation

Author

Made with

About the code

Book Opening Animation

Book opening animation in pure CSS.

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

Author

Made with

About a code

Spinning 3D Book Using Only CSS

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

Demo image: Responsive Comic Book Layout

Author

Made with

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

Demo image: Book Flip

Author

Made with

About the code

Book Flip

CSS book flip with little jQuery.

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

Demo image: Jumpy Book Shelf

Author

Made with

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

Author

Made with

About a code

CSS 3D Bending Effect — Page Flip

CSS only experiment. Page flip with bending effect. Works only on browsers that support transform-style: preserve-3d .

Compatible browsers: Chrome, Edge, Opera, Safari

Demo image: Pure CSS Animal Book

Author

Made with

About the code

Pure CSS Animal Book

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

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

Demo image: Animated Books with CSS 3D Transforms

Author

Made with

About the code

Animated Books with CSS 3D Transforms

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

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

Demo image: 3D Book Showcase

Author

Made with

About the code

3D Book Showcase

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Handbook CSS3

Author

Источник

Оцените статью
© 2024 Программирование