Хаки и Скрипты Next Generation CMS

АНИМИРОВАННЫЕ КНИГИ С CSS 3D-ПРЕОБРАЗОВАНИЕМ

irbees2008 irbees2008 Опубликовано - 11 - января Интерфейс
3827 - 0
  • Автор: МАРКО BARRIA
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Нашел красивую реализацию кнопки загрузка .Творческий способ показать интерактивные книги с помощью CSS 3D-преобразования.
Ну я не буду описывать как все это работает,это вы можете прочитать на сайте источника,Я просто объясню как установить.
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем в папку с шаблоном.
2.В хеад подключаем стили и скрипт

Код:
<link rel="stylesheet"  href="{{ tpl_ur l}}/css/book.css" />
<script src="{{ tpl_url }}/js/modernizr.custom.js"></script>
3.Ну и сам HTML код
Код:
<ul class="align">
<li>
<figure class='book'>

<!-- Front -->

<ul class='hardcover_front'>
<li>
<div class="coverDesign yellow">/- этот код отвечает заобложку-/
<span class="ribbon">NEW</span>
<h1>CSS</h1>
<p>TRANSFORM</p>
</div>
</li>
<li></li>
</ul>

<!-- Pages -->

<ul class='page'>
<li></li>
<li>
<a class="btn" href="#">Download</a>/-здесь ссылка на загрузку которая внутри книги-/
</li>
<li></li>
<li></li>
<li></li>
</ul>

<!-- Back -->

<ul class='hardcover_back'>
<li></li>
<li></li>
</ul>
<ul class='book_spine'>
<li></li>
<li></li>
</ul>
<figcaption>/- Ну а здесь само описание новости -/
<h1>CSS Ninja</h1>
<span>By Marco Barría for Codrops</span>
<p>Tomatillo water chestnut mustard cabbage yarrow sierra leone bologi. Watercress green bean groundnut earthnut pea dandelion radicchio.</p>
</figcaption>
</figure>
</li>
Вроде все ,кому что не понятно пишем комментарии,в исходнике два варианта книга и тетрадь

Можешь почитать и вот эту статейку "Плюшки для FontAwesome"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4572 дня
  • Новостей: 567
  • Комменты: 257
  • Зарегистрированно : 672
  • Онлайн всего: [14]
  • Гости: [12]
  • Поисковики: [2] Google, Яндекс
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 0.336сек
  • Потребление памяти: 5.166 Mb 
  •   Яндекс.Метрика