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

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

irbees2008 irbees2008 Опубликовано - 11 - января Интерфейс
3739 - 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>
Вроде все ,кому что не понятно пишем комментарии,в исходнике два варианта книга и тетрадь

Можешь почитать и вот эту статейку "Замена текста во всех статьях "

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

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

Теги

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

Статистика

  • Caйту: 4452 дня
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 668
  • Онлайн всего: [4]
  • Гости: [4]
  • Были сегодня : [2] Яндекс, Google
  • SQL запросов: 32
  • Генерация страницы: 0.599сек
  • Потребление памяти: 6.115 Mb 
  •   Яндекс.Метрика