Хаки и Скрипты Next Generation CMS : Интерфейс, Кнопки и иконки, CSS : АНИМИРОВАННЫЕ КНИГИ С CSS 3D-ПРЕОБРАЗОВАНИЕМ

irbees2008 Опубликовано - 11 - января Интерфейс

Автор: МАРКО 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>

Вроде все ,кому что не понятно пишем комментарии,в исходнике два варианта книга и тетрадь

Можешь почитать и вот эту статейку "Рисуем макет шаблона в фотошопе"

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

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