ali-partners-banner

Как быстро заработать в Интернет и, якобы, (простите за прямоту) Вам ни хрена не придется делать - сегодня советчиков пруд-пруди. Но, как гласит народная мудрость: Дешевый сыр только в мышеловке...


3D анимированная книга на чистом CSS

Пост №   27  от 30 апреля 2013   |  Категория: Design, WEB мастеру, Новости  |  Комментариев нет Print

3D-bookСегодня рассмотрим очень интересный вариант анимации без применения каких-либо плагинов, скриптов и прочего дополнительного «оборудования» для анимации изображения. Только чистый CSS.

Данный пример с успехом может реализовываться в блогах, которые рекламируют печатные издания, буклеты, DVD и прочее…


Конечно же, можно просто воспользоваться онлайн генератором создания подобной продукции. НО! Такой генератор не сделает эффекта поворота (анимации) книги, что придает этому элементу свою привлекательность. И так, сначала смотрим «живой» пример.

3d-book1А теперь, начнем с того, что подготовим изображение для своей книги (буклета, DVD…). Для этого подберем необходимое изображение jpg и «разрежем» его по вертикали, отделив, таким образом, фронтальную часть обложки от корешка.

Это необходимо для того, чтобы при анимации обложки, линии фонf фронтальной картинки плавно переходили в корешок, как будто это одно целое полотно. Сделать это можно в Photoshop’e (я предпочитаю работать в Fireworks CS5 — легче, быстрее и проще!).

Разрезали. Теперь сохраним отдельно 2 этих картинки, каждую под своим именем: корешок «обзываем» — spine.jpg, а фронтальную картинку — cover.jpg. Забрасываем обе картинки в папку images, созданную в папке 3d-book.

В принципе, основная работа по подготовке изображений закончена. Я специально отредактировал в css оригинал, имеющий больший размер 3D Book, чтобы можно было вставлять данный «прибамбас» в сайдбар любого блога, имеющего ширину в 250px. Так, что Вам не придется особо мучаться с подгонкой.

Тем более, что картинку css файл трансформирует высоту пропорционально к ширине. Это задается таким параметром:

Откроете файл css и посмотрите на код — там все предельно ясно. Далее, останется только вывести в необходимом месте соответствующий div блок-контейнер с книгой и прописанными ссылками на любой Ваш контент:

Вот, пожалуй, и все. В архиве, который Вы сможете скачать по ссылке ниже, есть все, чтобы настроить этот блок «под себя». Внимательно смотрите css и экспериментируйте с размерами. Все должно у Вас получиться!

DEMO DOWNLOAD

Источник: http://tinyurl.com/bjcvb6h

Удачи и… до новых встреч!

Понравился сайт или статья? Поделитесь с друзьями, кликнув по соответствующей кнопке!

e-Commerce Partners Network
1 звезда2 звезды3 звезды4 звезды5 звезд (Голосовало: 1 )
Загрузка...

Метки: CSSDesignWEB мастеруКак сделать?
Обновление статьи: 04.06.2017
Просмотров:   2183
Короткая ссылка: http://tinyurl.com/cb9f6wq

Подишись на сообщения блога по E-mail и получай свежие новости в числе первых!


Наберитесь терпения - новые публикации в процессе осмысления...


На сегодня в блоге...

  • Подписчиков: 3270
  • Записей: 189
  • Страниц: 26
  • Рубрик: 15
  • Меток: 162
  • Комментариев: 33


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

Комментарии к статьям разрешены только авторизованным пользователям.
Пожалуйста зарегистрируйтесь или войдите, используя свой логнн.

Посетители сайта

Блуждали по сайту сегодня: 85
Смотрят страницу: 1 ( 1 гость)
Из них ботов:

Календарь публикаций

Пн Вт Ср Чт Пт Сб Вс
 1234
567891011
12131415161718
19202122232425
2627282930  

MasterPRO в Twitter’e

I just uploaded “Сауна в квартире -это реально!” to #Vimeo: vimeo.com/221782129

Last week from Master PRO's Twitter via Vimeo · reply · retweet · favorite

Календарь праздников


Admin

Регистрация

The Best OnLine Radio

Рубрики

  • Страницы

    Архив


    Prikolizmy.ru: Видео приколы - AeonBlackSun :: Любимое