• 2151
  • 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>
Вроде все ,кому что не понятно пишем комментарии,в исходнике два варианта книга и тетрадь

Можешь почитать и вот эту статейку "Исправляем ошибки с помощью пользователей"

mistakes

Это тоже интересно

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

Ваше мнение

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

Облако тегов

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