Skype

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
Просмотров:   2476
Короткая ссылка: http://tinyurl.com/cb9f6wq

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


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


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

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


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

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

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

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

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

Пн Вт Ср Чт Пт Сб Вс
 123
45678910
11121314151617
18192021222324
25262728293031

MasterPRO в Twitter’e

I have 3 new followers from UK., and more last week. See tweepsmap.com/!unist… pic.twitter.com/aGar…

About 6 days ago from Master PRO's Twitter via Tweepsmap · reply · retweet · favorite

Информер праздников

Праздники ЛатвииПраздники России


Admin

Регистрация

The Best OnLine Radio

Рубрики

  • Страницы

    Архив


    Погода
    Погода в Юрмале

    влажность:

    давление:

    ветер:

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