Имитация книги из фотографии

Данный небольшой CSS-код создает эффект "книги на журнальном столике" (coffee table books). Так называют книги, которые будут идеально смотреться на журнальном столике, а в нашем случае на странице сайта.

Для реализации этого эффекта нужно просто обернуть фотографию в один <div> с классом book

Примеры:

HTML:

CSS:

Найдено на codepen.io у пользователя Lynn Fisher
Фотографии: kellepics

Смотрите также:

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

Ваш комментарий отправлен!

Комментарии:

  • Фаррух:

    Добрый день. Замечательный эффект ! С далеко возможным развитием…
    Но вот у меня не вышло применить его. Искажает. Что не так.
    Вот фон для него: https://ibb.co/1KLJ349
    А вот, что выходит:
    https://ibb.co/jLxBVVN

    Ответить
    • Alexander:

      Размер фотографии.
      Тут нужно вертикльное фото, а не горизонтальное или квадратное.
      Можно конечно что-нибудь нахимичить, но лишнее все равно отрежется и не будет его видно.

      Ответить
      • Фаррух:

        Да, Александр ! Действительно размер… Повозился и сделал желаемое
        Нужно добавить в статью предпочтительные размеры 420 х 530 !!!
        Демонстрирую:
        https://ibb.co/MnDDTsg

        Спасибо !!!

        Ответить